web-dev-qa-db-ja.com

iOSでyoutube.comで動画を自動再生する方法

自分のサイトでYouTubeビデオ(IFrame API)の自動再生をtrueに設定すると、機能しません。すべてのドキュメントには、Appleは帯域幅の理由でiOSでの自動再生を無効にします。

ただし、iPadのyoutube.comでビデオが(ビデオ要素をクリックせずに)自動的に再生されることがわかります。 YouTubeはどのように機能しましたか? AppleはYouTubeのためだけに何か特別なことをします。

27
vsky

Youtubeのチームは、ビデオボタンをタップ/クリックして再生を許可するときに、ユーザーの操作を使用しているようです。

Youtube.comはSPA(シングルページアプリケーション)なので、ページのリロードやリダイレクトはありません。

そのため、youtube.comでは自動再生が有効になっていません。

Javascriptを使用して実行できます。

次に例を示します。

<div class="video-container">
    <div id="player"> </div> <!--<iframe width="960" height="720" src="//www.youtube.com/embed/5YptIh_avrM?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>-->

</div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '720',
      width: '960',
      videoId: 'YOUR_ID_HERE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }



  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
    event.target.setVolume(20);
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {

  }
  function stopVideo() {
    player.stopVideo();
  }
</script>
1
Bas van Stein