HTML / JavaScript / jQuery / 備忘録

ある複数の動画データをサイトのページ上で一つの枠内で動画をループ再生してほしいという依頼を受けました。

一つ目の動画が終了し、次の動画に切り替わって再生ということをしたいのだそう。

・・・Youtubeで良くない？と心の中で思いましたが、クライアント様にはYoutubeの仕組みとか動画データの扱いとかはなかなか理解しづらいこともあるはずなので、今回は希望通りの動画データを利用することにしました。

比較的軽いデータとしてMP4形式もありますが、Web用動画で短時間ならGoogle社開発のWebm形式でも良いかと思います。

現在のブラウザでは音声有での自動再生はセキュリティ的に停止するようなので、音声の品質はあまり考えなくても良いかと思っています。むしろキーンとかシャーとかのノイズさえないように編集するほうが良いかと。

 

再生するためのコーディングはvideoタグ、ループ再生させる記述はJavaScriptで行います。

【HTML】

<div class="movie">
  <video id="video01" poster="" autoplay muted playsinline controls metadata>
    <source src="video01.webm" type="video/webm">
    <p>動画が表示されない際のメッセージ.</p>
  </video>
</div>
<div class="movie">
  <video id="video02" poster="" muted playsinline controls metadata style="display: none;">
    <source src="video02.webm" type="video/webm">
    <p>動画が表示されない際のメッセージ.</p>
  </video>
</div>

 

最初のビデオはオートプレイを付け、後のビデオにはオートプレイを付けず、displayをnoneで非表示にしておきます。

 

【Javascript】

<script>
  $(function () {
    var video01 = document.getElementById("video01");
    var video02 = document.getElementById("video02");
    // video01の再生が終わった場合
    video01.addEventListener("ended", function () {
      $(this).hide();
      $(video02).show();
      video02.play();
    });

    // video02の再生が終わった場合
    video02.addEventListener("ended", function () {
      $(this).hide();
      $(video01).show();
      video01.play();
    });
  });
</script>

 

jQueryで$(video01).play() や $("#video01").play() では再生出来ませんでした。そのため、表示の変化はjQuery、動画のコントロールはJavaScriptと分けています。