Question

我正在尝试在本机android / ios应用程序中播放Youtube视频。我已经定义了一个webview：

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

传递我想要播放的视频的网址：

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

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

我想只显示视频部分而不是评论部分。网址中是否有任何遗漏？

Answer 1

在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'}}
/>

Answer 2

我认为你可以使用视频从youtube加载嵌入式html，直接加载到你的本地webview中。您可以改为将WebView的source属性设置为html，而不是导航到url，如下所示：

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

基于this stack overflow post描述如何将youtube iframe加载到普通的android webview中，你可以在这里替换＆＃34; HTML＆＃34;使用实际的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的说明。

Answer 3

我遇到了你的问题。您希望用户将视频教程作为道具传递，但是一个天真的用户不知道什么是嵌入式链接，他只是从浏览器中复制并粘贴一个URL并将其粘贴，这将不是嵌入式URL，但是您可以转换它。参见以下示例：

原始视频：-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
        });
        }

Answer 4

此代码对我有用

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

在Review Native的Webview中嵌入youtube视频

4 个答案: