複数のVimeo動画を連続再生し、秒数に応じてテロップ画像を横に表示する

動画の中で「こちらの表をご覧ください」といったケースで、表が良く見えない場合など、動画に合わせて表画像が表示されると便利です。もちろん動画編集で処理するのが最適ですが、動画とは別に表示されることの利点も多いかと思います。

先ずはサンプルです。
https://studio-key.com/Sample2/vimeo_telop/sample1.html
動画を3本連続再生し、その動画毎の再生時間に応じて画像が切り替わります。

考え方として「動画の再生時間を1秒ごとに取得し、その秒数に応じて画像を切替える」としました。今回は画像ですが、画像である必要はなくHTMLでもテキストでも可能です。

Vimeo動画を複数設定する

var videos = new Object();
		videos[0] = "420863642";
		videos[1] = "420863721";
		videos[2] = "420863549";

再生したい動画のVimeoURIを配列で記述しておきます。

再生動画に対して画像をセットする

var Images = new Object();
		Images[0] = {
			 5 : "02.jpg",
			10 : "03.jpg",
			15 : "04.jpg",
			20 : "05.jpg",
		};
		Images[1] = {
			 8 : "01.jpg",
			12 : "02.jpg",
			19 : "03.jpg",
			22 : "04.jpg",
			25 : "05.jpg",
		};
		Images[2] = {
			 3 : "01.jpg",
			10 : "02.jpg",
			19 : "03.jpg",
			22 : "04.jpg",
			25 : "05.jpg",
		};

Images[0]がvideos[0]の画像配列で、キーが秒数になります。つまり、動画１の５秒目に02.jpgに切り替える…というものです。あとは好きなように１０秒目、１５秒目とセットします。

動画を連続再生する

var vi=0;
  player.on('ended', function(data) {
    var loadVideo = $("#vimeoPlayer");
    vi++;
    if(videos[vi]){
      player.loadVideo(videos[vi]).then(function(id) {
          player.play();
      });
    }
  });

playeyが終了した際にviを足し、次の動画があれば再生するという処理です。

動画の再生時間を取得して画像を表示する

  setInterval(function(){
    player.getCurrentTime().then(function(seconds){
      var hms = "";
      var h = seconds / 3600 | 0;
      var m = seconds % 3600 / 60 | 0;
      var s = Math.floor(seconds % 60);
      
      if(Images[vi][s]){
        $("#image").attr("src",'common/img/'+vi+'/'+Images[vi][s]);
      }
      if (h == 0) h="0";
      if (m == 0) m="0";
      hms = Zero(h) + ":" + Zero(m) + ":" + Zero(s) + "";
      $("#timer").html(hms);
    });
  },1000);

player.getCurrentTime()で再生時間を得ることが出来ますので、setIntervalで１秒毎に再生時間を取得し、現在の再生時間を得ます。あとは秒数に応じて画像を切替えます。HTMLを別に定義しておけば文章を挿入することも可能です。