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

はじめに

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

で、さらに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に画像を描画する形になるのかなぁと思います

以上です