読者です 読者をやめる 読者になる 読者になる

スマホでの動画インライン自動再生まわりについて調べたことまとめ

javascript

はじめに

ちょっと前に自分なりに調べて放置になっていたのでまとめておく
まず前提としてiPhoneAndroidで全然違う。

で、さらにios10とios9以下とでちがうのとchrome53以上と53未満でちがう。
端末やブラウザのバージョンで処理を切り分けるのがよいのかと思われる

iPhone

> ios9以下
videoタグを使ってインライン再生するのは無理ぽい。
なので、videoタグで読み込んだ動画をcanvasにsetintervalで随時描画してゆく形になると思う。
また、音声についてはcanvasでは全然関係ないので別途audio要素を作って再生する形になると思う。

> ios10
videoタグを使ってインライン再生ができるようになった。
が、自動再生については音声なしのときの場合のみ使える。

Android

videoタグを使ってインライン再生が可能。

> chrome53未満
自動再生はむりぽい

> chrome53以上
mutedをtrueとしておけば自動再生可能。

ちなみにchromeじゃないけど標準ブラウザでは基本的に音声ミュートが使えないみたいなので常にmuted=false

まとめ

インライン再生 音声 自動再生
ios9以下 canvasを使う audio要素を別途使う 映像のみ可能
ios10 videoタグで可能 可能 音声なしの制限ありで可能
android chrome53未満 videoタグで可能 可能 不可
android chrome53以上 videoタグで可能 可能 音声なしの制限ありで可能
android 標準ブラウザ videoタグで可能 音声なしでの再生が不可 不可

具体的な実装方については色々のってそうだけど後でまとめてみようかと思います
また、ios10、chrome53以上以外で自動再生を実装する場合は音なしという制限つきでパラパラ漫画のイメージでcanvasに画像を描画する形になるのかなぁと思います

以上です