VideoJS Player Demo Code


<!DOCTYPE html>
<!-- VideoJS 7.x variant VHS https://github.com/videojs/http-streaming -->
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Include VideoJS 7.x version styling & player -->
  <link href="https://cdn.jsdelivr.net/npm/video.js@7/dist/video-js.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/video.js@7/dist/video.min.js"></script>

  <!-- Include https://github.com/chrisboustead/videojs-vtt-thumbnails -->
  <link href="https://cdn.jsdelivr.net/npm/videojs-vtt-thumbnails/dist/videojs-vtt-thumbnails.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/videojs-vtt-thumbnails/dist/videojs-vtt-thumbnails.min.js"></script>

  <title>Auto-DASH-HLS VideoJS Player</title>
</head>

<body>
  <main role="main" id="main">
    <video id="player" class="video-js vjs-default-skin vjs-fluid" controls nativeControlsForTouch poster="thumbnails/poster.png">
      <!-- DASH-Playlist location -->
      <source src="playlist.mpd" type="application/dash+xml">
      <!-- HLS-Playlist location -->
      <source src="playlist.m3u8" type="application/x-mpegURL">
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.
      </p>
    </video>
  </main>

  <script>
    /* Initialize VideoJS Player */
    (function(videojs) {
      var videojsplayer = window.player = videojs('player');
      videojsplayer.vttThumbnails({
        src: 'thumbnails/thumbnails.vtt'
      });
    })(window.videojs);
  </script>

</body>

</html>