1

视频自动播放（包括 YouTube 的 autoplay=1）在 iOS Safari 上不起作用。Apple 和大量博客文章都详细记录了这一点。然而，这确实会导致使用 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>
4

0 回答 0