Blog スタッフブログ

2022.06.15

JavaScript WEB制作システム開発

[JavaScript]Video.jsでタイムスタンプ付き動画プレイヤーを実装

こんにちは、株式会社MIXシステム開発担当のBloomです。

早速本題のVideo.jsでタイムスタンプ付きの動画プレイヤーを構築する手順について、

お仕事の中で得た知見を共有させていただきたいと思います。

Video.jsとは

Video.jsとは、HTML5上で動作する動画プレイヤーのオープンソースフレームワークです。

CSSによる装飾にも対応しているため、videoタグをそのまま利用するのと比較してプレイヤーの表示様式を異なる環境間で揃えられる利点を持ちます。

動画プレイヤーの組み込み

まずは基本的な動画プレイヤーの組み込みを行います。今回はCDN経由でVideo.jsを利用します。

<head>
  <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
  <!-- [7.19.2]の部分はバージョンが入ります -->
</head>

<body>
    <video
      id="video-js-sample"
      class="video-js vjs-big-play-centered"
      controls
      preload="auto"
      width="640"
      height="360"
      data-setup="{}"
    >
    <source src="sample.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script>
  <!-- [7.19.2]の部分はバージョンが入ります -->
</body>

実行結果

タイムスタンプの追加

では、ここにタイムスタンプを追加しましょう。

例えばYouTubeのコメント欄に表示されるようなタイムスタンプであれば単純に<a>タグのみで実現可能です。

<a href="javascript:void(0);" onclick="moveTime(10);">0:10</a>

<script>
<!-- 引数は秒数です -->
function moveTime(time) {
    var video = videojs("video-js-sample"); 
	video.currentTime(time); 
}
</script>

今回はこれに加えて、動画のシークバー上にタイムスタンプで指定されている位置をハイライトするマーカーを設置したいと思います。まずはマーカーのデザインをCSSで制作しましょう。

.vjs-marker
{
  position:absolute;
  background:red;
  width:5px;
  height:110%;
  top:-5%;
  z-index:30;
  margin-left:-3px;
}

.vjs-marker:hover span 
{
  opacity:1;
}

.vjs-marker span
{
  position:absolute;
  bottom:15px;
  opacity:0;
  margin-left:-20px;
  z-index:90;
  background:rgba(0,0,0,.8);
  padding:8px;
  font-size:10px;
}

このマーカーをシークバー上に配置します。今回はjQueryも併用して装飾しましょう。

<head>
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
    <link href="marker.css" rel="stylesheet" />
</head>

<script>
var video = videojs("video-js-sample"); 

var markers = [
  {time:5,label:'5秒です'},
  {time:10,label:'10秒です'}
];

video.on("loadedmetadata",function(){
  var total = video.duration();
  var p = jQuery(video.controlBar.progressControl.children_[0].el_);
  for(var i=0;i<markers.length;i++) {
    var left =( markers[i].time/ total * 100)+'%';
    var time = markers[i].time;
    var el = jQuery('<div class="vjs-marker" style="left:'+left+'" data-time="'+time+'"><span>'+markers[i].label+'</span></div>');
    el.click(function(){
      video.currentTime($(this).data('time')); 
    });
    p.append(el);
  }
});
</script>

実行結果

0:10へジャンプ

これでタイムスタンプが表示できました。良かったですね。