動画を扱うものを作るときに、webであればvideoタグを使うことで簡単に動画を扱うことができます
今回はこのvideoタグを使って動画をwebブラウザで再生し
動画をJavascriptで切り替えるのをやってみたいと思います
動画再生
まずは動画の再生
videoのsrcプロパティを使う
video
タグのsrc
プロパティに動画のアドレスを指定して再生します
<video src="./test.mp4"></video>
source要素を使う
source
要素を使います
<video> <source src="./test.mp4"> </video>
source
要素を使う利点は下記のコードのように指定しておけば
複数の候補から、ブラウザが再生できるものを自動で選んでくれます
<video> <source src="./test.mp4"> <source src="./test.webm"> </video>
動画の切り替え
ここからjavascriptを使います
最初はsource
を使って、sourceの部分を書き換えてやれば動くだろうと思ってたんだけど
それだとうまく読み込まれないみたい
この要素がすでに video や audio 要素に挿入されてから、動的に source 要素やその属性を変更しても、何も効果はありません source 要素 - HTML5.JP
なので今回はvideo
のsrc
プロパティを使う方法で切り替えたいと思います
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <video id="video" src="testA.mp4"></video> </body> </html>
(function() { "use strict"; var video = document.getElementById('video'); var movie_url = "testB.mp4"; video.addEventListener('ended', function() { video.src = movie_url; video.load(); video.play(); }) })();
とても簡単なコードなので説明というような説明がないのですが
これでtestA.mp4
の動画が終了したタイミングでtestB.mp4
に切り替わります
video要素のイベントはこの辺を見ればいいと思います
- HTML5 ビデオ イベントの使用 - microsoft
- HTML Audio/Video DOM Reference - w3schools
- video要素、audio要素をJavaScriptから操作する-HTML5のAPI、および、関連仕様
まとめ
video
要素はjavascriptのAPIが結構しっかりしてていろいろ遊べそうです
今回とりあえず切り替えはできましたが
切り替え時にどうしてもカクつくというかUX的に気持ち悪いものがあるので
もっとスムーズに切り替える方法を模索しないといけない