1. Qiita
  2. Items
  3. HTML5

はたして iPhone は iOS 10 なら動画を自動再生できるのか

  • 29
    Like
  • 0
    Comment

結論から言えば可能になりました。
ただし、無音に限る。

Video要素で自動再生する

iOS10 Mobile Safariにおけるビデオの自動再生
↑すでに記事があったのでこちらでファイナルアンサーです。

一応自分も検証用にデモを用意したのでリンクだけ貼っておきます。
http://s.codepen.io/haribote/debug/qaVoav
※【大容量注意報】 携帯電話回線での閲覧は通信容量を消費するのでご注意ください!!

実装コード例

CodePen - video auto play より一部抜粋

<video src="path/to/video.mp4" width="1280" height="720" autoplay muted playsinline></video>

自動再生させるには autoplay, muted, playsinline の3つの属性を設定することが必要です。

YouTubeも自動再生できませんか…?

YouTubeのIFrame API を利用することで可能です!

こちらも検証用にデモを用意したのでリンク貼ります。
http://s.codepen.io/haribote/debug/NRwYXv
※【大容量注意報】 携帯電話回線での閲覧は通信容量を消費するのでご注意ください!!

実装コード例

CodePen - youtube auto play より一部抜粋

const scriptEl = document.createElement('script');
const headEl   = document.querySelector('head');

scriptEl.src = "https://www.youtube.com/iframe_api";
headEl.appendChild(scriptEl);

function onYouTubeIframeAPIReady() {
  const player = new YT.Player('video', {
    videoId: 'YE7VzlLtp-4',
    width: '1280',
    height: '720',
    playerVars: {
      playsinline: 1,
    },
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  const player = event.target;

  player.mute();
  player.playVideo();
}

YT.Playerインスタンスを作るときに { playerVars: { playsinline: 1 } } を設定し、onReadyハンドラで mute() してから playVideo() すれば自動再生します!

できるからといってやって良いとは限らない

PCサイトでよく見る、トップページの背景に動画を再生させておくようなものをスマホ向けに作ろうと思うと、これまでは大量の画像を用意してパラパラ漫画の要領でcanvasに描き出す方式が一般的でした。
動作環境として iOS 9 が切れるようになったら(およそ1年後?)、そのような実装は必要なくなるかもしれません。
しかし動画にしてもパラパラ漫画にしても大容量のデータを必要とすることには変わりなく、通信容量制限のある携帯電話回線での閲覧を考えると安易な採用は控えるべきでしょう。
回線種別などを取得することのできるNetwork Information APIが多くのブラウザに実装されれば、「携帯電話回線では自動再生しない」などの振り分けも簡単なのですが…。
ということでスマホ向けに動画の自動再生(っぽいもの含め)を実装するなら用法・用量を守って正しく使ってね(←これが言いたかった)!