Question

视频自动播放（包括YouTubes autoplay = 1）在iOS Safari上无效。苹果公司和大量博客文章都记录了这一点。但是，这会对使用YouTube视频的自定义控件造成问题，我无法在任何地方找到肯定的是/否答案。如果我使用简单的HTML5视频标签就没有问题 - 但我真的不需要为所有不同的平台编码所有视频。

我需要完成的是：

显示封面图片（平面PNG，顶部带有播放图标）。
用户点击封面图片，图片将被开始播放的YouTube视频取代。

从用户的角度来看，这不是自动播放，因为它是通过点击启动的。但是，在所有非Flash设备上，YouTube嵌入都会显示在iframe中，从而导致视频有效加载和自动播放（至少，我认为是这样）。有谁知道这个问题的任何变通方法？

此代码段说明了此问题。它适用于例如FireFox，但在iOS Safari上，它只显示加载指示符，然后以黑屏结束。

如果我添加“apple-mobile-web-app-capable”元标记并从主屏幕启动该网站，则视频播放正确。

<div id="movieContainer" style="width: 768px; height: 432px; border: 1px solid #cccccc;">Initializing player API...</div>

<div id="status">Initializing player API...</div>

<button onclick="player.playVideo();">Play</button>

<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


var playerAPIIsLoaded = false;
function onYouTubePlayerAPIReady()
{
    playerAPIIsLoaded = true;
    document.getElementById("status").innerHTML = "Player API initialized!";
}

var player = null;
function initMovie()
{
  document.getElementById("status").innerHTML = "Loading video..."

  player = new YT.Player(
    'movieContainer',
    {
        height: '432'
      , width: '768'
      , playerVars: { 'autoplay': 0, 'controls': 2, 'rel': 0, 'showinfo': 0 }
      , videoId: 'MwnZr4VJQPQ'
      , events: { 'onReady': function (event) { document.getElementById("status").innerHTML = "Video loaded!";/*event.target.playVideo();*/ } }
        }
    );
}

window.onload = initMovie;
</script>

iOS视频自动播放限制的自定义播放按钮跳闸

0 个答案: