Fatal编程技术网
  • javascript/
  • Javascript 在React Native的Webview中嵌入youtube视频

Javascript 在React Native的Webview中嵌入youtube视频

javascript android webview youtube react-native

Javascript 在React Native的Webview中嵌入youtube视频,javascript,android,webview,youtube,react-native,Javascript,Android,Webview,Youtube,React Native,我正在尝试在react原生android/ios应用程序中播放Youtube视频。我定义了一个webview： <WebView style={styles.frame} url={this.props.url} renderLoading={this.renderLoading} renderErro

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

               <WebView
                    style={styles.frame}
                    url={this.props.url}
                    renderLoading={this.renderLoading}
                    renderError={this.renderError}
                    automaticallyAdjustContentInsets={false}
                />
但这会在webview中显示整个youtube页面，包括评论部分

我只想显示视频部分，不想显示评论部分。url中是否缺少任何内容？

我认为您可以将视频从youtube中嵌入的html直接加载到您的react原生网络视图中。与其导航到url，不如将WebView的源属性设置为html，如下所示：

<WebView source={{ html: "HTML here" }} 
.../>
根据描述如何将youtube iframe加载到普通android网络视图中，您可以用实际的HTML替换“此处的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>" }} 
.../>
您可以获得获取的说明。

将YouTube嵌入React本机iOS设备的最简单方法是使用
。您只需将
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'}}
/>
这个代码对我很有用

<WebView
        style={{ marginTop: 20, width: 320, height: 230 }}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        source={{ uri: "https://www.youtube.com/embed/-ZZPOXn6_9w" }}
      />
我有你的问题。你想让你的用户通过视频教程作为道具，但一个天真的用户不知道什么是嵌入式链接，他只会复制和粘贴浏览器中的URL并粘贴它，这将不是嵌入式的，但你可以转换它。请参见此示例：

原始视频：-
嵌入式视频：-

让我们看看如何转换它：

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
        });
        }
只需一条评论，如果谷歌在youtube之外播放视频，它将阻止你的应用。请确保你在锁定设备时，Android中的视频不会一直在后台播放。否则该应用程序将被谷歌Play商店拒绝。在android emulator和设备（htc desire）中为我工作，仅仅使用flex是不起作用的。（必须指定高度和宽度）我的应用程序被Google Play store使用此方法拒绝，请检查此处以获得替代解决方案-- 
   componentDidMount() {
        const Video = this.props.navigation.getParam("Video");

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

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

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