HTML5ベースの動画プレイヤーを開発する上で、Videoタグの再生停止メソッドを実行したり、現在位置の取得や設定、倍速再生や音量調整を制御することは多いですし、再生開始のplay、playingイベントや一時停止のpause、最後まで再生完了のended、再生中に発生するtimeupdateなどのイベントを検知してプレイヤーの状態に連動した処理を組み込むことは頻繁にあります。

ただこの動画プレイヤーを制御するにあたり端末やブラウザによって機種依存が多く存在するのも事実です。例えば再生させるplayメソッドはiOSの場合、初回再生時のみ必ずクリック(Click)やタッチ(Touch)などのユーザーアクションを必要とし、ページ読み込み完了後にJavaScriptでそのようなユーザーアクションなしでplayメソッドを実行して再生開始することは出来ません。一度でも再生開始されればユーザーアクションなしでの制御が可能となります。

また、各種ブラウザではendedイベント発生時にpauseイベントが発生するものやしないもの、プレイヤーは読み込み後まだ再生していないにも関わらずtimeupdateが発生するものがあったり、通常は動画メタが読み込まれたloadedmetadataイベントの後に動画が再生可能になったcanplayイベントが発生するがその順番が違うものなどがあります。

発生するイベントに差があったり、順番は全く保証されないという点がプレイヤー開発の難易度を上げるひとつの原因となっておりますが、どの端末、どのブラウザでどういう動きをしているのかをチェックできるようデモを用意しました。

先日の「動画プレイヤーのイベントって何? 楽しいの? 〜HTML5動画プレイヤーの再生開始や再生完了を検知してアクションを起こす〜」の記事のところでも載せたデモプレイヤーに各種制御を追加しました。

また、HLS(m3u8)、PD(mp4)も切り替えられるので、その挙動も確認できます。端末によってはHLSが再生できない、HLS再生時のみ挙動がおかしいなどということも起こり得ます。

デモページ

Jin