HTMLのvideoタグで動画を埋め込むサンプル

HTMLのvideo要素で動画を埋め込むサンプルです。

動画の再生停止ボタンやシークバーなどはvideo要素だけでも標準のデザインのものが使えますが、プラスアルファの機能を提供しているVideo.jsもここでは利用しています。

<!DOCTYPE html>
<html>
<head>
<title>sample movie</title>
<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
<script src="https://videojs.github.io/videojs-playbackrate-adjuster/dist/browser/videojs-playbackrate-adjuster.js"></script> <!-- 再生速度を選択できる機能 -->
</head>
<body>

<!-- videoの属性 -->
<!-- controls: 動画の下にコントロールを表示 -->
<!-- autoplay: ページを開いたときに動画を自動再生 -->
<!-- muted: 音声の初期状態はミュート（Chromeでは自動再生するにはこれが必要条件） -->

<video id="player"
       class="video-js vjs-default-skin"
       width="640"
       height="400"
       controls
       autoplay
       muted
       >
  <source src="sample.mp4" type="video/mp4">
  <track kind="subtitles" src="thumbnails.vtt" label="Japanese" default srclang="ja" /> <!-- 字幕のファイル -->
</video>
<script>
  const player = videojs('player', {
      playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2], // 再生速度
  });
</script>

</body>
</html>

字幕ファイル thumbnails.vtt は、以下のようなテキストファイルです。

WEBVTT

00:00:00.000 --> 00:30:00.000
あいうえお

00:00:30.000 --> 00:40:00.000
かきくけこ

これで以下のような動画のインターフェースを作れます。再生速度の設定や字幕の選択ができます。

f:id:suzuki-navi:20210120235720p:plain

※このスクショは以下の記事の動画をサンプルに使いました。