AngularJS:在 iframe 中嵌入 Youtube 视频不适用于 Android Chrome

标签 angularjs iframe mobile youtube mobile-chrome

我正在使用 AngularJS 开发一个 Web 应用程序,并且我正在使用一个指令来嵌入名为 的响应式 Youtube 视频。 youtube响应式 它允许将视频嵌入到 iframe 中,并将视频 id 作为源参数。

这一切都可以在桌面浏览器上完美运行,事实上我还设法嵌入了一个播放列表并循环播放。

我现在遇到的问题是在 Chrome Android 上,在 Nexus 5 设备上 (运行 Lollipop 最新更新)嵌入的视频未显示 相反,我可以看到正在进行下载的通知。每次刷新时,我都会看到下载过程重新开始,但没有显示视频。如果我单击下载通知以查看文件,则没有任何 react 。

当然,我的目标是在自动播放和循环事件的情况下在移动设备上显示视频。

我可以看到使用 USB 调试在移动设备上检查页面的输出 (chrome://inspect/#devices)

<iframe id="ytplayer" type="text/html" width="100%" height="202.5" ng-src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&amp;autoplay=1&amp;loop=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;wmode=opaque" frameborder="0" allowfullscreen="" video-slug="ZhfUv0spHCY" class="ng-isolate-scope" src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&amp;autoplay=1&amp;loop=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;wmode=opaque"></iframe>

除了我可以在桌面上看到的相同警告外,我在移动设备上看不到任何错误,这显然没有阻止视频至少在那里播放。
 Resource interpreted as Document but transferred with MIME type application/x-shockwave-flash: 
"https://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque".

有人在 Android Chrome 或其他移动设备和操作系统上遇到过同样的问题吗?

我还没有开始在 AOSP 或 iOS 上进行测试,但已经在 Chrome 上,这个问题非常令人担忧。让我知道是否有人设法修复它。

最佳答案

您特别请求旧的 Flash 播放器小部件,并且不允许它升级到 HTML5,而现在任何类型的移动支持都需要它。您应该切换到 YouTube Player API,它需要几行额外的代码来实现,但几乎可以在任何地方工作,并为您提供大量有关视频播放等的事件数据。

https://developers.google.com/youtube/iframe_api_reference

您仍然可以将 IFRAME 与此技术一起使用,尽管考虑该指令似乎支持当前 API:

https://github.com/brandly/angular-youtube-embed

关于AngularJS:在 iframe 中嵌入 Youtube 视频不适用于 Android Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29681146/

相关文章:

javascript - Uncaught Error : [$injector:unpr] Unknown provider: aProvider <- a

angularjs - 如何使用 AngularJS 创建可排序的 Accordion ?

Firefox 在浏览器的新选项卡中打开针对 iFrame 的链接

java - 实现复杂首选项屏幕的最佳方式?

javascript - onexit - 请求一个 url

javascript - 遍历 JavaScript 对象的最佳实践

javascript - 渲染列表输入中的特定元素 - AngularJS

javascript - 显示互联网页面的 HTML

iframe - 扩展弹出窗口或后台脚本中的 iframe 的内容脚本

javascript - 如何修复 jQuery Mobile 的固定页脚?