在React Native的Webview中嵌入youtube视频

nhhxz33t 于 2023-05-29 发布在 React

关注(0)|答案(6)|浏览(199)

我试图在react原生android/ios应用程序中播放Youtube视频。我定义了一个webview：

<WebView
    style={styles.frame}
    url={this.props.url}
    renderLoading={this.renderLoading}
    renderError={this.renderError}
    automaticallyAdjustContentInsets={false}
/>

并传递我想播放的视频的url：

this.navigate('Play', 'https://www.youtube.com/watch?v=RJa4kG1N3d0')

但这会在webview中显示整个youtube页面，包括评论部分。

我想只显示视频部分，而不是评论部分。URL中缺少了什么吗？

react-native

来源：https://stackoverflow.com/questions/38153121/embed-youtube-video-in-webview-of-react-native

6条答案

按热度按时间

mctunoxg1#

在React Native iOS设备中嵌入YouTube的最简单方法是使用<WebView>。您需要做的就是将watch?v=替换为embed。这将无法与Android。
示例：

<WebView
        style={{flex:1}}
        javaScriptEnabled={true}
        source={{uri: 'https://www.youtube.com/embed/ZZ5LpwO-An4?rel=0&autoplay=0&showinfo=0&controls=0'}}
/>

赞(0）回复(0）举报 2023-05-29

mspsb9vt2#

这个密码对我很有效

<WebView
        style={{ marginTop: 20, width: 320, height: 230 }}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        source={{ uri: "https://www.youtube.com/embed/-ZZPOXn6_9w" }}
      />

赞(0）回复(0）举报 2023-05-29

wecizke33#

我有你的问题。你想让你的用户通过视频教程作为 prop ，但一个天真的用户不知道什么是嵌入式链接，他只会复制和粘贴一个网址从浏览器和粘贴，这将不会是嵌入的一个，但你可以转换它。请看下面的例子：
原始视频：-https://www.youtube.com/watch?v=qaiLSpqeBHY
嵌入式视频：-https://www.youtube.com/embed/qaiLSpqeBHY
让我们看看如何转换它：

const OriginalVideo = "https://www.youtube.com/watch?v=qaiLSpqeBHY"

const SplitedVideo = OriginalVideo.split("watch?v=")

const Embed = SplitedVideo.join("embed/")

console.log(Embed)

这是从原始视频URL转换的嵌入视频。
示例：-

componentDidMount() {
        const Video = this.props.navigation.getParam("Video");

        const MyVideo = Video.split("watch?v=");

        const EmbededVideo = MyVideo.join("embed/");

        this.setState({
         Video: EmbededVideo
        });
        }

赞(0）回复(0）举报 2023-05-29

wmtdaxz34#

我想你可以从youtube上下载视频的嵌入html，直接到你的react native webview中。而不是导航到url，而是将WebView的source属性设置为html，如下所示：

<WebView source={{ html: "HTML here" }} 
.../>

基于this stack overflow post描述如何将youtube iframe加载到正常的android webview中，您可以将“HTML here”替换为实际的html，因此它看起来像：

<WebView source={{ html: "<html><body>Look Ma' a video! <br /> <iframe width="560" height="315" src="https://www.youtube.com/embed/RJa4kG1N3d0" frameborder="0" allowfullscreen></iframe></body></html>" }} 
.../>

你可以得到获得embed link for a youtube video here的方向。

赞(0）回复(0）举报 2023-05-29

xyhw6mcr5#

<WebView
  style={{ flex: 1, aspectRatio: 16 / 9 }}
  source={{ uri: 'https://www.youtube.com/embed/LXb3EKWsInQ?rel=0&autoplay=1&showinfo=0' }}
  allowsInlineMediaPlayback={true}
  mediaPlaybackRequiresUserAction={Platform.OS !== 'android' || Platform.Version >= 17 ? false : undefined}
  userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36"
/>

支持自动播放（不支持自动全屏）
测试iOS和Android

赞(0）回复(0）举报 2023-05-29

4jb9z9bj6#

import React, { useState, useCallback, useRef } from "react";
import { Button, View, Alert } from "react-native";
import YoutubePlayer from "react-native-youtube-iframe";

export default function App() {
  const [playing, setPlaying] = useState(false);

  const onStateChange = useCallback((state) => {
    if (state === "ended") {
      setPlaying(false);
      Alert.alert("video has finished playing!");
    }
  }, []);

  const togglePlaying = useCallback(() => {
    setPlaying((prev) => !prev);
  }, []);

  return (
    <View>
      <YoutubePlayer
        height={300}
        play={playing}
        videoId={"iee2TATGMyI"}
        onChangeState={onStateChange}
      />
      <Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
    </View>
  );
}

赞(0）回复(0）举报 2023-05-29

我来回答

在React Native的Webview中嵌入youtube视频

6条答案

相关问题

热门标签

最新问答