index.html

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>videojs-cmcd Demo</title>
  <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
  <link rel="shortcut icon" href="#">
</head>

<body>
  <video id="videojs-cmcd-player" class="video-js vjs-default-skin" controls></video>
  <select id="video-selector">
    <option value= "0" >Big Buck Bunny (HLS) </option>
    <option value= "1" >Dolby VOD (HLS) </option>
    <option value= "2" >Live Akamai (HLS) </option>
    <option value= "3" >Big Buck Bunny (Dash) </option>  
  </select>
  <ul>
    <li><a href="/test/debug.html">Run unit tests in browser.</a></li>
    <li><a href="docs/api/">Read generated docs.</a></li>
  </ul>
  <script src='https://cdn.jsdelivr.net/npm/@montevideo-tech/cmcd-validator@latest/dist/cmcd-validator.min.js'></script>
  <script src="node_modules/video.js/dist/video.js"></script>
  <script src="dist/videojs-cmcd.js"></script>
  <script>
    (function(window, videojs) {

      // Init player and plguin
      var player = window.player = videojs('videojs-cmcd-player');
      var cmcd = window.cmcd = player.cmcd({sid: 'SesssionID'});

      // Add CMCDValidator (open the browser console to see the logs)
      player.on('loadstart', function() {
        var obr = player.tech().vhs.xhr.beforeRequest
        player.tech().vhs.xhr.beforeRequest = function(options) {
          if (obr) obr(options)
          console.log(window.CMCDValidator.CMCDQueryValidator(options.uri))
          return options;
        };
      })

      const videoSelector = window.document.getElementById('video-selector');
      videoSelector.addEventListener('change', (event) => {
        const list = [
          {
            src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
            type: 'application/x-mpegURL'
          },
          {
            src: 'http://d3rlna7iyyu8wu.cloudfront.net/skip_armstrong/skip_armstrong_stereo_subs.m3u8',
            type: 'application/x-mpegURL'
          },
          {
            src: 'https://moctobpltc-i.akamaihd.net/hls/live/571329/eight/playlist.m3u8',
            type: 'application/x-mpegURL'
          },
          {
            src: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
            type: 'application/dash+xml'
          }
        ];
        const selectedValue = event.target.value;
        player.src(list[selectedValue]);
        player.cmcd().setId({cid: list[selectedValue].src});
      });
    }(window, window.videojs));
  </script>
</body>

</html>