1

ビデオの自動再生 (YouTube の自動再生 = 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