🧊

モバイルでの動画再生について

  • インライン再生とか
  • 自動再生とか

そのへんについてさくっとメモ。
今流行のライブ配信については触れてません。

playsinline

iOS10↑で使える。

<video src="path/to/video.mp4" playsinline></video>

`playsinline`を指定するとインライン再生ができる。

ただしWebViewだと、アプリの種類によって効いたり効かなかったりする。
Twitterはダメ、LINEはOKとか。

未対応な環境だと、`playsinline`を指定してても`video.play()`すると全画面で再生されちゃう。

`video.play()`しない

`play()`するから全画面になってしまうわけで、しなければよい。

  • `video.currentTime`を変更して、それを`canvas`に転写
  • 自前で動画ファイルをdemuxして、それを`canvas`に描画

このどっちかをやるしかなさそう。
このアプローチだと、iOS10未満でもインライン再生できる。

固定長の動画ファイルを流すだけなら前者でもやれるけど、`.m3u8`とかだとvideoでなんか上手く捌けない時があるらしいので、生放送がーみたいな感じだとめっちゃ頑張って後者をやるしかなさそう。
サンプルでは`.mp4`しか見てないけども、HLS / RTMPとかだともっと色々ハマりどころがあるんやろなーと思う。

自動再生

音入りの動画でも、`muted`ならできるようになってた。

ただ音に関してはどうしてもユーザーハンドラを経る必要がある。
そもそもモバイルで自動再生したいUXってのが想像できないので、割とどうでもよいかも？と個人的には思う。

と思ったけど、アレなところではアレなようです。