みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

iOS10のiPhoneのmobile Safariではビデオ要素(videoタグ)をインラインで再生できるようになったし、無音のビデオなら自動で再生できるようになった模様

iOS10でビデオをインライン再生する

kimizuka.hatenablog.com

これまで、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);
DEMO

f:id:kimizuka:20160920015803p:plain
http://jsrun.it/kimmy/cQMs
※ iOS10のiPhoneでご確認ください

ちょっとわかりにくいですが、画面の上の方をクリックするとビデオが再生します。


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

f:id:kimizuka:20160920013611p:plain
http://jsrun.it/kimmy/sNee
※ iOS10のiPhoneでご確認ください

autoplay属性で再生しても良いですし、JavaScriptでplayメソッドを叩いても再生できます。

JavaScript
document.getElementById("video").play();

f:id:kimizuka:20160920020719p:plain
http://jsrun.it/kimmy/GmEx
※ iOS10のiPhoneでご確認ください


いろいろとつかいみちがありそうですね。