前回の記事ではYoutubeの動画を再生する方法を扱ったので、今回はHTML5のvideoタグを使用してみよう。
前回記事
[HTML] PCサイトにYoutubeの動画を埋め込む
まずは単純なところから始めてみよう。
これだけで動画を再生することが出来る。
テクノロジーは私達の生活を楽にしてくれることが実感できる瞬間だ。
色々なブラウザに対応したい場合は3つのフォーマットの動画を用意する必要があるので注意が必要だ。
詳しくはここに書いてある。
HTML5 Video - w3schools.com
次は動画の終了イベントを拾って、複数の動画を連続再生してみよう。
前回記事
[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つの動画がループして再生されるようになったはずだ!
まずは動画を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つの動画がループして再生されるようになったはずだ!
コメント
コメント一覧 (6)
この記事がお役に立てたなら幸いです。
全くこの通りにやって、ループもでき、動画も表示されているのですが、
なぜか動画の最後の数秒が重なって再生されます。
以下の様に再生されます。
【1→1の最後数秒→2→2の最後数秒→3→1→1の最後数秒-.....】
動画のデータ自体はうまく編集できていたので、
ループの関係かなと思うのですが、何か原因わかられますか?
私の環境ではそういった現象は起きないので、正直わかりません。
以下の様なことを試してみてはいかがでしょうか。
・他のPC、他のブラウザで試してみる
・動画を他のものに差し替えてみる
・endedイベントの中にデバッグ出力を仕込んで、動画の終了と次の動画の再生のタイミングを確認する
御社の連続再生を使わせていただきたく組み込んでいるのですが
2つ質問が御座います。
1つは3つの動画を再生して最初の動画でスタンバイする方法を教えていただけますか。もう1つはプレーヤーの全画面表示をすると連続再生が出来ません。
ブラウザは、IEとgoogle chromeとも同じ表情です。
改良方法を教えていただけますか。