Webview和iframe无法在Chrome打包应用中的沙盒iframe中显示Youtube视频

2023年10月6日 397次阅读

我正在开发一个Chrome打包的应用程序(不是传统的打包应用程序);我的应用程序需要包含一个沙盒iframe(运行第三方
HTML / JS代码),我需要使用webview或iframe来显示Youtube视频.都不起作用;我无法播放任何Youtube视频. (但是,在沙盒iframe之外使用时,webview可以正常工作.)

主HTML文件如下所示：

 <iframe src="sandbox.html"></iframe>

文件sandbox.html在manifest.json中声明.它看起来像这样(我正在尝试两种播放Youtube视频的方式)：

<webview width="420" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k"></webview>
<iframe width="420" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>

当我运行这个应用程序时,webview是一个空的白色矩形.另一方面,iframe包含封面图像,Youtube播放器控制视频.

首先,为什么webview是空的？只要我在沙盒iframe外使用webview,webview就可以在这个应用程序中播放(播放视频).当webview位于沙箱内时,它会默默地拒绝加载任何内容.

其次,当我运行这个应用程序时,控制台中有错误：

 GET chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js net::ERR_FAILED www-embed-player.js:140
 GET chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js net::ERR_FAILED www-embed-player.js:140
 GET chrome-extension://hfaagokkkhdbgiakmmlclaapfelnkoah/cast_sender.js net::ERR_FAILED www-embed-player.js:140
 GET chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js net::ERR_FAILED www-embed-player.js:140
 GET chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js net::ERR_FAILED www-embed-player.js:140

当我在沙盒页面内加载上面显示的iframe时会出现这些错误.这些错误很奇怪(为什么Chrome会尝试从一些随机Chrome扩展程序中加载JS文件？)

当我尝试在iframe中开始播放视频时,我有时会从Youtube播放器收到消息“发生错误”,有时没有消息但播放器变黑.在所有情况下,我在控制台上都有此错误：

 XMLHttpRequest cannot load https://www.youtube.com/get_video_info?html5=1&video_id=S2VXOd3uXh8&cpn=Rso…=en_US&sts=16309&lact=11140&width=300&height=300&iframe=1&c=web&cver=html5. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

我的manifest.json拥有所有必要的权限：

 "permissions": [
 "http://www.youtube.com/*", "https://www.youtube.com/*", "webview" ],
 "sandbox": {
   "pages": [ "sandbox.html" ]
 }, ...

我试过< object data = …>,< embed src = …>,MediaElement – 它们在Chrome应用中根本不起作用.

我不知所措,也无法在网上找到任何相关信息.

>为什么webview在沙盒iframe中时是空白的？
>我可以做些什么来使webview或iframe在打包的Chrome应用程序中的沙盒iframe内工作以显示Youtube视频？

最佳答案 您应该将网址直接加载到网页视图中,而不是通过iframe加载.

您的主HTML应包含：

<webview  width="420" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k"></webview>

直.
我尝试将您的URL http://www.youtube ….加载到浏览器示例应用程序中,该应用程序将URL加载到内部并且似乎正常工作.
可以在此处找到浏览器示例应用程序以供参考：
webview-samples/browser

点赞