CA Reward

Tech Blog

Tech Blogトップに戻る

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

2016.09.09

  • このエントリーをはてなブックマークに追加
  • Pocket
ふっちー
ふっちーエンジニア

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

前回に引き続き、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に描画することで、再生しているように見せかけています。

See the Pen iOS Safari HTML5 video inline play with canvas by junya fuchinoue (@fuchinoue_j) on CodePen.

See the Pen iOS Safari HTML5 video inline play with canvas by junya fuchinoue (@fuchinoue_j) on CodePen.

実装方法

1. videoタグの表示をcanvasに描画する

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

See the Pen iOS Safari HTML5 video inline play with canvas | work 1 by junya fuchinoue (@fuchinoue_j) on CodePen.

See the Pen iOS Safari HTML5 video inline play with canvas | work 1 by junya fuchinoue (@fuchinoue_j) on CodePen.

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

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

2. videoタグのcurrentTimeを変更する

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

See the Pen iOS Safari HTML5 video inline play with canvas | work 2.1 by junya fuchinoue (@fuchinoue_j) on CodePen.

See the Pen iOS Safari HTML5 video inline play with canvas | work 2.1 by junya fuchinoue (@fuchinoue_j) on CodePen.

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

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

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

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

3. videoタグを非表示にする

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

See the Pen iOS Safari HTML5 video inline play with canvas by junya fuchinoue (@fuchinoue_j) on CodePen.

See the Pen iOS Safari HTML5 video inline play with canvas by junya fuchinoue (@fuchinoue_j) on CodePen.

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

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

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

さいごに

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

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

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

iOS10たのしみ。