PlusOne Blog

HTMLのvideoタグで動画を自動再生するとき、iphoneのsafariでは自動再生されなかったので、その時の対応の備忘録
　

　
videoタグのvideoを自動再生するとき、autoplay属性を付与する。

　　<video id="myvideo" src="●●●/×××.mp4" autoplay></video>

　
ただし、これではiphoneでは自動再生されない。
次の２つの属性を付与する必要がある
・playsinline
　ビデオをインラインで再生する。昔は、iOSではインラインで再生されなかったが、インラインで再生できるようになった。自動再生するには、インラインで再生が必須。
・muted
　ページ遷移でいきなり音が出るのはユーザビリティが非常に悪いので、音がでないようにしておかなければ自動再生できない仕様となっているらしい。
　
★→autoplay、playsinline、muted属性３つセットで次のように記述しないと、自動再生されない。

　　<video id="myvideo" src="●●●/×××.mp4"  autoplay muted playsinline></video>

　
ただし、上記記述をしてもiphoneで自動再生されなかった。
何かしらの影響で、muted属性がうまく認識されなかった可能性があるので、jsで強制的にmuteにしてみたら、自動再生されるようになった。

　　$(function() {
　　　　var video = $('video').get(0);
　　　（または
　　　　　var video = $('#myvideo')）
　　　　video.muted = true;
    }

　
今回は、php を使って場合分けを行い、videoタグをつけていたため、
タイミング的にvideoタグのmuted属性をうまく読み込めなかった可能性がある。
こういった場合は、jsで読み込み完了時に強制的にmutedを付与すれば解決した。