在 React Native 的 Webview 中嵌入 youtube 视频
Posted
技术标签:
【中文标题】在 React Native 的 Webview 中嵌入 youtube 视频【英文标题】：Embed youtube video in Webview of React Native 【发布时间】：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 商店拒绝。 【参考方案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 商店拒绝，在此处查看替代解决方案 -- ***.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 src="https://www.youtube.com/embed/RJa4kG1N3d0" frameborder="0" allowfullscreen></iframe></body></html>"
.../>
您可以获取获取embed link for a youtube video here 的说明。
【讨论】：
以上是关于在 React Native 的 Webview 中嵌入 youtube 视频的主要内容，如果未能解决你的问题，请参考以下文章
如何在 iOS 的 WebView(react-native-webview) 中设置自定义字体？
React-native：如何自动保存 webview 当前网页？
有啥方法可以在 react-native-webview 中禁用 hapticFeedback
在 React Native WebView 中加载捆绑的静态资产