YouTube iFrame API视频在移动设备上间歇播放

我在这方面花了太多时间，但收效甚微。我们有一个网站客户，当网页加载时有一个YouTube视频弹出窗口。它在桌面上自动播放，并在手机上显示Youtube播放按钮，因为手机不支持自动播放。我正在使用iFrame JS API来实例化视频播放器（下面的代码示例）。此设置在桌面上完美工作，但在移动设备（Android或iOS）上，在我和我的同事之间，点击Youtube播放按钮只能在大约80％的时间播放视频。剩下的时间，视频加载微调只是旋转，没有任何反应。如果我关闭重新加载，则使用站点控制器的播放器将播放，但最初不会播放。YouTube iFrame API视频在移动设备上间歇播放

我知道这对大多数用户来说并不是问题，但是我知道我们的客户如果在他们的iPhone上重新加载100次，他们中的10个会导致这种行为。

我实例球员如下：

1）我在包括YouTube的iframe API JS的网站首先在“硬拷贝”。

2）I有一个对象控制包含该玩家目标的YouTube“的模态”窗口的显示 - 当调用该函数时它具有下列功能：

// Write a div element to the container 
_instance.videoContainer.innerHTML = '<div id="youtube-player"></div>'; 
// Grab a reference to it 
_instance.el = document.getElementById('youtube-player'); 
// Call the YT player API 
_instance.player = new YT.Player('youtube-player', { 
    playerVars: { // trying a bunch of different params with no success 
      playsinline : 1 , 
      origin : window.location.origin , 
      autoplay : 1 , 
      wmode: "opaque" , 
      iv_load_policy : 3 
    }, 
    videoId: videoId , // This is passed to the function 
    events : { 
      onReady : function(){ 
       console.log('resolved player'); 
       // another function that just changes the container visibility 
       _instance.play(); 
      }, 
      onStateChange : function(event){ 
      if(event.data == YT.PlayerState.ENDED){ 
       _instance.close(); 
      } 
      } 
     } 
});

此时，视频要么在100％的时间自动在桌面上播放，要么在移动设备上显示带有视频缩略图和大红色播放按钮的Youtube播放器。这是麻烦开始的地方 - 大多数时间表现良好，剩下的时间只是旋转和旋转，从不玩。有趣的是，在Android上，如果我模糊窗口并重新打开它，我可以再次单击播放按钮并播放它。

在这一点上应该没什么关系，但是当模式关闭时，我正在摧毁div和玩家参考。

我已经试过几乎所有我能想到的...

Youtube视频以某种方式被通过iframe原点节流，并且只显示这么多次？我将这个'原点'属性添加到参数中，认为可能是这种情况，但它似乎没有太大区别。我的成功率似乎比加载视频的同事要高。
是否有理由异步加载youtube iframe脚本，如示例中所示，而不是从我的网站加载副本？

这就是我现在所能想到的......有什么我失踪了吗？谢谢。

来源

2017-07-28 user446882

有一个相关thread其中规定autoplay功能不允许为大多数移动设备。

从这个documentation：

由于这种限制，功能等参数，自动播放，调用playVideo（），loadVideoById（）将不会在所有的移动环境下工作。

一个simple workaround是有 “播放” 按钮的自定义外观：

有pointer-events: none;覆盖元素。 pointer-events适用于所有现代mobile browsers或只需将按钮上的视频容器与opacity: 0配合使用。

希望这会有所帮助！

来源

2017-07-30 17:41:57 abielita

感谢您的回复。这是一个令人沮丧的问题。但是，这个问题并不是自动运行。这是因为在手机上点击实际的YouTube播放器的播放按钮只是在某些时候才能成功播放视频，其余时间只会导致悬挂加载旋钮。 – user446882

YouTube iFrame API视频在移动设备上间歇播放

回答

相关问题