AngularJS:iframe中嵌入YouTube视频无法在Android的Chrome浏览器浏览器、视频、iframe、AngularJS

2023-09-13 04:17:16 作者:我爱台妹

我发展与AngularJS一个Web应用程序,我使用嵌入响应Youtube视频指令名为 youtubeResponsive ,允许嵌入的视频在iframe与视频id作为源参数。

I'm developing a web application with AngularJS and I'm using a directive for embedding responsive Youtube videos called youtubeResponsive which allows to embed videos in an iframe with a video id as source parameter.

这一切都完美地在桌面浏览器,其实我也设法嵌入播放列表和循环播放。

It all works perfectly on desktop browsers, in fact I also managed to embed a playlist and play it in a loop.

我遇到的问题是现在的在Chrome的Andr​​oid,是Nexus 5的设备(棒棒堂运行最新更新)上的嵌入视频没有显示,而是我可以看到下载的通知回事。每次我刷新我看到了下载过程重新启动,但没有视频显示。如果我点击下载通知查看该文件没有任何反应。

The problem I'm having is now on Chrome Android, on a Nexus 5 device (running Lollipop latest update) the video embedded is not showing and instead I can see a notification of a download going on. Every time I refresh I see the download process restarting but no video is showing. If I click on the download notification to see the file nothing happens.

当然,我的目标是与自动播放和循环活动也显示在移动设备上的视频。

Of course my aim is to display the video also on mobile with autoplay and loop active.

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

The output which I can see inspecting the page on mobile using USB debugging (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>

我没有看到手机上的任何错误,除了相同的警告,我可以在桌面上,这显然不是在玩至少有阻塞视频中看到。

I don't see any error on mobile except the same warning I can see on desktop which apparently is not blocking the video from playing at least there.

 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或其他移动设备和同样的问题OS?

Anyone experienced the same issue on Android Chrome or on other mobile devices and OS ?

我还没有开始AOSP或iOS还没有测试,但已经在Chrome的问题是相当令人担忧。让我知道,如果有人设法解决它。

I haven't started testing on AOSP or iOS yet but already on Chrome the issue is quite concerning. Let me know if anyone managed to fix it.

推荐答案

您会特别要求旧的Flash播放器插件,而不是让它升级到HTML5,这是目前需要移动支持任何形式的。你应该切换到YouTube播放器API,这就需要code的一些额外的线条来实现,但将努力在几乎任何地方,并给你很多的事件数据的后面大约视频播放等。

You're specifically requesting the old Flash player widget and not allowing it to upgrade to HTML5, which is required now for mobile support of any kind. You should switch to the YouTube Player API, which requires a few extra lines of code to implement but will work almost anywhere and give you a lot of event data back about videos playing, etc.

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

您还可以使用一个IFRAME使用这种技术,虽然考虑这个指令这似乎支持目前API:

You can still use an IFRAME with this technique, although consider this directive which appears to support the current API:

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