ロゴ
menu
HOME > ｊQuery・Javascript > 複数のVimeo動画を連続再生し、秒数に応じてテロップ画像を横に表示する

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

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

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

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

Vimeo動画を複数設定する

SyntaxHighlighterについて
1
2
3
4
var videos = new Object();
        videos[0] = "420863642";
        videos[1] = "420863721";
        videos[2] = "420863549";

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

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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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に切り替える…というものです。あとは好きなように１０秒目、１５秒目とセットします。

動画を連続再生する

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
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を足し、次の動画があれば再生するという処理です。

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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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を別に定義しておけば文章を挿入することも可能です。