packages/media-tracks/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Media Tracks</title>
  </head>
  <body>
    <style>
      video {
        width: 100%;
        aspect-ratio: 16 / 9;
        max-width: 960px;
      }
    </style>

    <video
      crossorigin
      controls
      muted
    ></video>

    <br>

    <select id="qualityselect">
      <option value="auto">Auto</option>
    </select>

    <span id="qualityselected"></span>

    <br>

    <select id="audioselect">
    </select>

    <script type="module">
      // Importing this module polyfills the native HTMLMediaElement API.
      import './dist/polyfill.js';
      import 'https://cdn.jsdelivr.net/npm/hls.js@1';

      const myVideo = document.querySelector('video');

      console.log(myVideo.videoTracks);
      console.log(myVideo.audioTracks);

      let videoSrc = 'https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008.m3u8';

      // Polyfilled media API's
      //
      // Add renditions to select element
      // Listen for resize events
      // Enable / disable renditions from select

      myVideo.videoRenditions.addEventListener('addrendition', ({ rendition }) => {
        qualityselect.append(new Option(
          `${Math.min(rendition.width, rendition.height)}p`,
          rendition.id,
        ));
      });

      myVideo.addEventListener('resize', () => {
        qualityselected.textContent = `${Math.min(myVideo.videoWidth, myVideo.videoHeight)}p`;
      });

      qualityselect.addEventListener('change', () => {
        myVideo.videoRenditions.selectedIndex = qualityselect.selectedIndex - 1;
      });

      // Audio tracks
      // Add audio tracks to select menu
      // Enable / disable audio tracks from select
      myVideo.audioTracks.addEventListener('removetrack', ({ track }) => {
        audioselect.querySelector(`[value="${track.id}"]`)?.remove();
      });

      myVideo.audioTracks.addEventListener('addtrack', ({ track }) => {
        audioselect.append(new Option(
          track.label,
          track.id,
          track.enabled,
          track.enabled
        ));
      });

      audioselect.addEventListener('change', () => {
        for (let track of myVideo.audioTracks) {
          track.enabled = audioselect.value == track.id;
        }
      });

      // After this line will be all handled internally in the media engine.

      if (myVideo.canPlayType('application/vnd.apple.mpegurl')) {
        myVideo.src = videoSrc;

      } else if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(videoSrc);
        hls.attachMedia(myVideo);

        // We will handle this in custom-media-element, hls-video, mux-video, etc.
        hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {

          const videoTrack = myVideo.addVideoTrack('main');
          videoTrack.selected = true;

          for (let [id, level] of data.levels.entries()) {

            const videoRendition = videoTrack.addRendition(
              level.url[0],
              level.width,
              level.height,
              level.videoCodec,
              level.bitrate,
            );

            videoRendition.id = id;
          }

          for (let [id, a] of data.audioTracks.entries()) {

            const kind = a.default ? 'main' : 'alternative';
            const audioTrack = myVideo.addAudioTrack(kind, a.name, a.lang);
            audioTrack.id = id;

            if (a.default) {
              audioTrack.enabled = true;
            }
          }
        });

        // hls.js doesn't support enabling multiple renditions easily
        // for demo purposes if all renditions are selected it's auto selection
        // if 1 of the renditions is deselected we assume a selection was made
        // and lock it to the first rendition that is selected.

        myVideo.videoRenditions.addEventListener('change', (event) => {
          console.log(event);

          let level = myVideo.videoRenditions.selectedIndex;

          if (level != hls.currentLevel) {
            console.log(`Changing level to ${level}`);
            hls.nextLevel = level;
          }
        });

        myVideo.audioTracks.addEventListener('change', () => {
          hls.audioTrack = [...myVideo.audioTracks].find(t => t.enabled).id;
        });

        // end of internal media tracks / renditions implementation
      }

      myVideo.addEventListener('emptied', (e) => {
        console.log(e.type, performance.now());
      });

      myVideo.addEventListener('loadstart', (e) => {
        console.log(e.type, performance.now());
      });

      myVideo.addEventListener('loadedmetadata', (e) => {
        console.log(e.type, performance.now());
      });

      myVideo.addEventListener('loadeddata', (e) => {
        console.log(e.type, performance.now());
      });

      myVideo.addEventListener('resize', (e) => {
        console.log(e.type, performance.now());
      });

      myVideo.addEventListener('canplay', (e) => {
        console.log(e.type, performance.now());
      });

      myVideo.videoTracks.addEventListener('change', (e) => {
        console.log(e.type, performance.now());
      })

      myVideo.videoTracks.addEventListener('addtrack', (e) => {
        console.log(e.type, performance.now());
        console.log(e.track)
      })

      myVideo.videoTracks.addEventListener('removetrack', (e) => {
        console.log(e.type, performance.now());
        console.log(e.track)
      })

      myVideo.audioTracks.addEventListener('addtrack', (e) => {
        console.log(e.type, performance.now());
        console.log(e.track)
      })

      myVideo.addEventListener('play', function(event) {
        console.log(event.type);
      });

      // setTimeout(() => {
      //   myVideo.removeAttribute('src');
      //   myVideo.load();
      // }, 5000);

    </script>

  </body>
</html>