iOS10でビデオをインライン再生する
これまで、iPhoneのmobile Safariでビデオをインラインするためには、
videoのplayを叩かずに、currentTimeを操作してCanvasにレンダリングするという涙ぐましい努力 をしてたりしたのですが、
iOS10でいよいよインライン再生に対応してくれました。
方法は簡単で、playsinline属性を振るだけです。
HTML
<video id="video" src="http://kimizuka.github.io/cdn/movie/ios-video.mp4" playsinline></video>
ただし、controls属性をつけ、UIから再生するとビデオプレイヤーでの再生になってしまうため、JavaScriptで再生のイベントを書いておきましょう。
JavaScript
document.getElementById("video").addEventListener("click", function() { this.play(); }, false);
iOS10でビデオを自動再生する
これまではAudioやVideoはユーザーアクションきっかけでしか再生できませんでしたが、
iOS10では無音かつインラインのビデオに対してautoplay属性が効くようになった模様です。
muted属性、playsinline属性、autoplay属性をつければOK。ついでにloop属性もつけておきましょう。
HTML
<video id="video" src="http://kimizuka.github.io/cdn/movie/ios-video.mp4" autoplay loop playsinline muted></video>
DEMO
http://jsrun.it/kimmy/sNee
※ iOS10のiPhoneでご確認ください
autoplay属性で再生しても良いですし、JavaScriptでplayメソッドを叩いても再生できます。
JavaScript
document.getElementById("video").play();
http://jsrun.it/kimmy/GmEx
※ iOS10のiPhoneでご確認ください
いろいろとつかいみちがありそうですね。