iOS视频自动播放限制上的自定义播放按钮行程

视频自动播放（包括YouTubes autoplay=1）在iOS Safari上不起作用。苹果和大量博客文章都记录了这一点。 但是，这确实会导致在YouTube视频中使用自定义控件时出现问题，我在任何地方都找不到明确的是/否答案。 如果我使用一个简单的HTML5视频标签，那就没有问题了——但我真的不想为所有不同的平台编码所有的视频

我需要完成的是：

封面图像显示为平面PNG，顶部有播放图标。 用户单击封面图像，图像被开始播放的YouTube视频替换。 从用户的角度来看，这不是自动播放，因为它是通过单击启动的。然而，在所有非Flash设备上，YouTube嵌入显示在iframe中，导致视频被有效加载和自动播放，至少我认为是这样。 有人知道这个问题的解决方法吗

这个片段说明了这个问题。它可以在FireFox中使用，但在iOS Safari上，它只显示加载指示器，然后以黑屏结束

如果我添加支持apple mobile web app的元标签，并从主屏幕启动该网站，视频将正确播放

<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禁止所有视频和音频自动播放。是的，我知道。但是，由于实际上发生了单击/用户交互，因此在这种情况下可能存在一种解决方法。只有当用户实际单击“播放”按钮时，才会播放iOS视频。