前回の記事ではYoutubeの動画を再生する方法を扱ったので、今回はHTML5のvideoタグを使用してみよう。

前回記事
[HTML] PCサイトにYoutubeの動画を埋め込む

まずは単純なところから始めてみよう。

これだけで動画を再生することが出来る。
テクノロジーは私達の生活を楽にしてくれることが実感できる瞬間だ。

色々なブラウザに対応したい場合は3つのフォーマットの動画を用意する必要があるので注意が必要だ。
詳しくはここに書いてある。
HTML5 Video - w3schools.com

次は動画の終了イベントを拾って、複数の動画を連続再生してみよう。
 
動画の終了イベントを処理する
まずは動画を3つ用意しよう。
htmlを次のようにする。  
video2とvideo3は順番に再生したいのでautoplay属性は付けない。

このままだと、3つの動画が画面上に表示されてしまうので、video2とvideo3は表示しないようにcssを設定する。

これで準備は完了だ。
今回はjQueryを使うので、jQuery本体は前もって読み込んでおいて欲しい。

動画の終了を知るにはendedイベントを処理すれば良い。
video1が終了したら、video2を表示して再生するようにしよう。

これで3つの動画が延々とループするようになったはずだ。
当初の予定としてはこれでひとまず完了だ!

もう少し処理を最適化してみる
リスト2-3は同じような処理が並んでいて冗長だ。
これらをまとめて処理するようにしてみよう。

1.何故このような書き方をしているか不思議に思うかもしれないが、これは絶対に必要だ。
こうしないと、video1が終わった際のendedイベントで、$nextVideoがループの最後の値である$("#video3")になってしまっていて、video1が延々と繰り返されてしまう。
それを防ぐためにクロージャを使っているわけだ。

2.終了した動画の次の要素を決定している

3.endedイベントの処理だ。
大まかにはリスト2-3と同じなので、特に説明は不要だろう。

さあ、実行してみよう。
3つの動画がループして再生されるようになったはずだ!