在 React Native 的 Webview 中嵌入 youtube 视频答案

【问题标题】：Embed youtube video in Webview of React Native在 React Native 的 Webview 中嵌入 youtube 视频
【发布时间】：2016-11-04 07:42:05
【问题描述】：

我正在尝试在反应原生 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 页面，包括 cmets 部分。

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

【问题讨论】：

只是评论，如果您的应用在 youtube 之外播放视频，Google 将阻止它。
确保您在 Android 中的视频在您锁定设备时不会在后台继续播放。否则，该应用将被 Google Play 商店拒绝。

标签： javascript android webview youtube react-native

【解决方案1】：

我遇到了你的问题。您希望您的用户将视频教程作为道具传递，但一个天真的用户不知道什么是嵌入式链接，他只会从浏览器复制并粘贴一个 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
        });
        }

【讨论】：

【解决方案2】：

这段代码对我有用

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

【讨论】：

【解决方案3】：

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

【讨论】：

在 android 模拟器和设备中为我工作（htc 的愿望），只是使用 flex 不起作用。（必须指定高度和宽度）
我的应用使用这种方法被 Google Play 商店拒绝，在此处查看替代解决方案 -- stackoverflow.com/questions/36382935

【解决方案4】：

我认为您可以将 youtube 中的嵌入 html 与视频一起加载到您的 react 本机 webview 中。与其导航到 url，不如将 WebView 的源属性设置为 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 的说明。

【讨论】：