live
/
m7s


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script src="hls.js"></script>
    <video id="video" controls></video>
    <script>
      function parseQuery(queryString) {
        var query = {};
        var pairs = (
          queryString[0] === '?' ? queryString.slice(1) : queryString
        ).split('&');
        for (var i = 0; i < pairs.length; i++) {
          var pair = pairs[i].split('=');
          query[decodeURIComponent(pair[0])] = decodeURIComponent(
            pair[1] || ''
          );
        }
        return query;
      }

      /* get stream from query string */
      function getParameterByName(name) {
        var query = parseQuery(window.location.search);
        return query.hasOwnProperty(name) ? query[name] : undefined;
      }

      var stream =
        getParameterByName('stream') ||
        'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
    </script>
    <script>
      if (Hls.isSupported()) {
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.loadSource(stream);
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
          video.muted = true;
          video.play();
        });
      }
    </script>
    <script>
      var video = document.getElementById('video');
      window.onload = function () {
        var i = 0;
        var el = document.getElementById('update');
        function foo() {
          i++;
          el.innerHTML =
            'animation:' +
            i +
            ',decoded:' +
            video.webkitDecodedFrameCount +
            ',dropped:' +
            video.webkitDroppedFrameCount;
          window.requestAnimationFrame(foo);
        }
        foo();
      };
    </script>
    <div id="update"></div>
  </body>
</html>