Question

我正在尝试将以下youtube视频嵌入一个展览项目：https://www.youtube.com/watch?v=mJ_fkw5j-t0

基于此处的答案：How to play Youtube videos using Expo，我尝试使用以下代码：

<WebView
            style={{flex:1}}
            javaScriptEnabled={true}
            source={{uri: 'https://www.youtube.com/embed/mOO5qRjVFLw'}}
        />
</View>

这在某种程度上可行，因为当应用程序加载时，我能够看到视频，但是当我尝试单击播放时，它说视频不存在（通过以下方式找到了嵌入的url） google的说明位于https://support.google.com/youtube/answer/171780?hl=en。

我还尝试通过将源代码更改为html来更改代码以使用youtube给我的完整嵌入：

 <WebView
    source={{html: <iframe width="560" height="315"  
         src="https://www.youtube.com/embed/mJ_fkw5j-t0" frameborder="0"    
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>}}
 />

但是这也会导致一长串我不明白的错误消息。但是，当我使用其他人的示例嵌入式视频时（原始答案来自之前链接的stackoverflow页面）：

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

这很好用，使我相信这是我获取嵌入链接/使用youtube给我的东西的方式，但我还不太清楚。
任何帮助将不胜感激。

更新：看来问题出在youtube生成的链接上-我一直在尝试不同的youtube视频，有时嵌入链接有效，有时却无效。当它不起作用时，当我尝试直接将嵌入链接粘贴到我的浏览器中时，它也不起作用；当它起作用时，当我将其粘贴到浏览器中时，它也起作用了，所以似乎这是一个错误YouTube会生成嵌入链接/视频，而不是Expo的问题。

Answer 1

这是我们格式化URL的方式，以便将YouTube视频嵌入到您的应用程序中。 https://www.youtube.com/embed/'+videoId+'?modestbranding=1&playsinline=1&showinfo=0&rel=0

其中videoId是youtube视频的唯一标识符。例如，https://www.youtube.com/watch?v=0lZDDyAgnWs的videoId将为0lZDDyAgnWs。

希望这会有所帮助。

将YouTube视频嵌入Expo项目

1 个答案: