【javascript】iPhone/iOSのSafariで動画をインラインで再生させる方法

こんにちは、ふっちーです。

前回に引き続き、HTML5 videoの話題に触れていきます。

iPhoneのSafariで動画を再生すると画面いっぱいに表示されちゃいますよね。方やAndroidのブラウザではそのまま再生される。こんな挙動の違いに悩まされ、iPhoneでもインライン再生をやりたいよ！と思った方も少なくないのではないでしょうか。僕もその一人です。

ということで、今回はiPhone/iOSのSafariブラウザにおける動画のインライン再生を試してみたので、その方法について紹介したいと思います。

■いきなりまとめ

・videoのcurrentTimeを操作し、フレーム都度の表示をcanvasに描画することでインライン再生を実現する。

・自動再生させることも可能。

・ただし、この方法だと音声の再生は行われないため音声の再生についてはaudioタグを別途設置し再生させる機能実装する必要がある。

・iOS10ではplaysinlineプロパティ（iOS9のWebViewで利用できていたwebkit-playsinlineから変更されるようです）によるインライン再生、また、mutedプロパティ設定時の自動再生が可能となるためcanvasを使う必要がなくなる。iOS10たのしみ。

iOSのSafariブラウザでは、videoタグの再生を実行するとビデオプレーヤーによるフルスクリーン再生となります。

そのため、今回の実装ではvideoタグの再生を実行せず、videoのcurrentTimeをfpsに合わせ加算していき、都度のフレームをcanvasに描画することで、再生しているように見せかけています。

まずはvideoの表示をcanvasに描画します。

canvasに描画を行うには、drawImage()を利用します。

描画領域の設定はちょっとくせがあるのですが、今回はあまり意識しなくて良いようにcanvasの大きさをvideoの大きさに合わせています。

videoをcanvasに描画することが出来たので、fpsに合わせcurrentTimeを加算し再生されているようにみせていきます。

setIntervalを利用し、currentTimeを加算しています。

canvasの描画はcurrentTimeが変更された際に発火するtimeupdateイベントにハンドルし実行させます。

また、currentTimeの変更後、リソースの読み込みが行われtimeupdateイベントが発火する前に次のcurrentTimeが設定されないよう、フラグで制御を行っています。

リソースの読み込みが遅い場合カクついてしまいます。。。ここは要ブラッシュアップ。

最後に、videoタグを非表示にしてcanvasのみの表示にします。

これでiPhone/iOSのSafariブラウザ上で動画のインライン再生が行えました。やったぜ。

ただ、上記サンプルの状態だと、音声はありません。

音声を再生させる場合は、動画から音声データのみを切り出したものを用意しaudioタグを設置、currentTimeの同期を取りながら平行して再生させる必要があるでしょう。

CodePenを初めて使ったけど、これは良いものだ。

サンプルコード中の動画はDropboxにアップロードしたものを使っています。素材は拾い物です。

Googleドライブでも静的URLを発行できなくなったので、しばらくはDropboxで行こうかと思います。

iOS10たのしみ。