videoタグの動画を切り替える

動画を扱うものを作るときに、webであればvideoタグを使うことで簡単に動画を扱うことができます

developer.mozilla.org

今回はこのvideoタグを使って動画をwebブラウザで再生し
動画をJavascriptで切り替えるのをやってみたいと思います

動画再生

まずは動画の再生

videoのsrcプロパティを使う

videoタグのsrcプロパティに動画のアドレスを指定して再生します

<video src="./test.mp4"></video>

source要素を使う

source要素を使います

developer.mozilla.org

<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要素のイベントはこの辺を見ればいいと思います

まとめ

video要素はjavascriptのAPIが結構しっかりしてていろいろ遊べそうです

今回とりあえず切り替えはできましたが
切り替え時にどうしてもカクつくというかUX的に気持ち悪いものがあるので
もっとスムーズに切り替える方法を模索しないといけない

ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

videoタグの動画を切り替える

動画再生

videoのsrcプロパティを使う

source要素を使う

動画の切り替え

まとめ