ブログ

スマホ（iOS）でも動画を自動再生させよう！（iFrame Player API、videoタグ対応）

こんにちは、やまだです。

ここ数年、メインビジュアルに動画を入れるサイトが増えてきています。
しかし、iOS10のsafari、つまりiPhoneでは自動再生がされないため、スマホの時は静止画で対応しているサイトも多く見受けられます。
やっぱり動画にしたい！という人のお悩み解決！
スマホでも自動再生させましょう！！

まず結論から

サイト内に動画入れる方法として、

  • iframe APIを使ってyoutubeから呼び出す
  • videoタグを使用する

というのが一般的かと思います。

最初に結論を述べると、
どちらの方法でもスマホでは無音でインライン再生なら自動再生することができます！！

どういうことかは、つべこべ言わずにやってみましょう！

iframe APIの場合

まずは、通常の手順で動画を埋め込みます。
これに関しては、今回は割愛させていただきます。
以下のサイトがとても参考になりますので、こちらをご覧ください。

スマホでも自動再生させるためには、
パラメータで、「playsinline」をtrueにする。必要があります。

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

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'XXXXXXXXXXXX',
    playerVars: {
      playsinline: 1 // 1はtrue、0はfalse
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

そして、onPlayerReadyのイベントで、音声を消した後に再生します。

function onPlayerReady(event) {
  event.target.mute();
  event.target.playVideo();
}

再生に関しては、autoplayのパラメータを付けてしまいたいところですが、ここが味噌。
音声を消す必要があるため、メソッドで動的に再生させる必要があります。

また自動再生に関しても、「loop」をtrueにすることができません。
こちらもonStateChangeの関数を使い、動画の再生が終わったら、再度動的に再生する必要があります。

function onPlayerStateChange(event) {
 if (event.data == YT.PlayerState.ENDED) {
    event.target.playVideo();
  }
}

これでスマホでも動画を自動再生し、尚且つループさせることができると思います。
あとは必要に応じてパラメータを付けてあげてください。

videoタグの場合

videoタグの場合もやることは一緒です。
インライン再生にする、音を消す。
こちらは、autoplayもloopも含めて直接タグにパラメータを書き込んでしまえば大丈夫です。

<video src="video.mp4" poster="video.jpg" playsinline muted autoplay loop></video>

これでスマホでも動画を自動再生できます！
そのほかオープニングにアニメーション入れたりするとタイミングを考えたりと色々あるかと思いますが、必要に応じて試してみてください！

参考