Videoを使った動画プレイヤーの実装方法いろいろ2016.07.12TweetPocketふっちーエンジニアHTML5JavaScriptこんにちは、ふっちーです。video(以下video)を使った動画プレイヤー事情を、インライン再生・自動再生の観点で検証してみました。まとめ実際どうなのよ、ていうのが知りたいと思うので、まず結果からお伝えしたいと思います。検証を行ったバリエーションと動作状況は以下の通りでした。canvas(以下canvas)の2つの手法ついて、ソースコードとそれぞれの再生を実現する方法と問題点についてまとめてみました。canvasは動画のフレーム毎にキャプチャした画像を順番にcanvasに描画するパラパラマンガ的な手法なのですが、こちらについては次の機会にまとめようと思います。)videoを利用した動画プレイヤーvideoを利用し、動画のインライン再生と自動再生を行う検証です。この手法はvideoを利用した最もシンプルな方法になるのですが、iOS/Safariでインライン再生が実現できないiOS/Safari、Android/ブラウザで自動再生が実現できないといった問題点が残りました。ちなみに、iOS/Safariでインライン再生についてはiOS10になることで解消される予定のようです。ソースコードインライン再生設定Android/ブラウザ、Android/WebViewでは標準でインライン再生となるので特に問題なしです。iOS/WebViewでインライン再生が行えるように、videoタグにwebkit-playsinline属性を設定します。iOS/Safari・Android/ブラウザの場合iOS/Safari・Android/ブラウザでは、自動再生は行えません。これは、videoのplay、loadなどのイベントの発火にユーザアクションが必須となっているブラウザ仕様に起因しているためどうしようもなさそうです。Javascriptでvideoのplayイベントの発火させても再生は開始されず、autoplay属性による自動再生ついても同様に行えないようです。PCブラウザ等では以下のスクリプトで自動再生を開始できます。◯iOS/WebView・Android/WebViewの場合アプリ内からvideoのplayイベントを発火させることで自動再生を開始することが出来ます。今回のソースコードで言うと、アプリからvideoPlay()を実行この際、自動再生を開始するタイミングなどはアプリ側の実装で行うことになります。(2.)video×canvasを利用した動画プレイヤーvideoとcanvasを利用し、動画のインライン再生と自動再生を行う検証です。要約すると、videoのcurrentTimeをsetInterval()でカウントアップしていき、都度のフレームをcanvasに描画する仕組みになります。この手法を取ることで、iOS/Safariでインライン再生を実現できます。音声の再生に対応していない(実際に再生を行っているわけではないので)Androidの低いバージョンの端末では、canvasへの描画が正しく行えない場合があるcanvasを利用するため端末負荷が高いといったところです。audioでcurrentTimeの同期をとった音声ファイルを再生することで、擬似的に再現することが出来ます。ジャストアイデアですが。ソースコードインライン再生設定こちらの方法では、標準がインライン再生の対応となります。逆に、フルスクリーン再生を行う際には、フルスクリーンを行う実装を別途行う必要があります。繰り返しになりますが、iOS/Safariでインライン再生を実現できる点は胸熱です。自動再生設定windowのonload時にvideoPlay()を発火させてあげることで自動再生を実現します。最後にブラウザにおける自動再生については、ユーザーの通信量を意識したブラウザ制約だとかがいろいろ絡んでいるようで、一筋縄には行かないようです。現状においても、対象となるブラウザ毎にそれぞれの動作パターンを組み合わせることで、スマートフォン向けの最適な動画プレイヤーが作成できそうな予感はしますね。プレイヤーだけでなく、プレイヤーに対応した動画素材の作成も大きな課題になりそうですが。今回はこんなところで。