wcheng81
/
jtBaseApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
							<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>videojs-contrib-quality-levels Demo</title>
  <link href="/node_modules/video.js/dist/video-js.css" rel="stylesheet">
  <style>
    button.enabled {
      background: SkyBlue;
    }
    button.selected {
      background: SpringGreen;
    }
    button.disabled {
      background: red;
    }
  </style>
</head>
<body>
  <div id="fixture">
  </div>
  <div id="quality-levels">
    <h2>Quality Levels:</h2>
  </div>
  <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="/node_modules/video.js/dist/video.js"></script>
  <script src="/node_modules/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
  <script src="/dist/videojs-contrib-quality-levels.js"></script>
  <script>
    function createQualityButton(qualityLevel, parent) {
      var button = document.createElement('button');
      var classes = button.classList;

      if (qualityLevel.enabled) {
        classes.add('enabled');
      } else {
        classes.add('disabled');
      }

      button.innerHTML = qualityLevel.id + ': ' + qualityLevel.bitrate + ' kbps';
      button.id = 'quality-level-' + qualityLevel.id;

      button.onclick = function() {
        var old = qualityLevel.enabled;
        qualityLevel.enabled = !old;
        button.classList.toggle('enabled');
        button.classList.toggle('disabled');
      }
      parent.appendChild(button);
    }

    function createPlayer(callback) {
      var video = document.createElement('video');
      video.id = 'videojs-contrib-quality-levels-player';
      video.className = 'video-js vjs-default-skin';
      video.setAttribute('controls', true);
      video.setAttribute('height', 300);
      video.setAttribute('width', 600);
      document.querySelector('#fixture').appendChild(video);

      var options = {
        autoplay: false,
        qualityLevels: {}
      };
      var url = 'https://hslsslak-a.akamaihd.net/3303963094001/3303963094001_5147618278001_5147609827001.m3u8?pubId=3303963094001&videoId=5147609827001';
      var type = 'application/x-mpegURL';

      try {
        window.player = videojs(video.id, options);

        window.player.src({
          src: url,
          type: type
        });

        callback(window.player);
      } catch(err) {
        console.log("caught an error trying to create and add src to player:", err);
      }
    }
    function setup(player) {
      player.ready(function() {
        var qualityLevels = player.qualityLevels();
        var container = document.getElementById('quality-levels');

        qualityLevels.on('addqualitylevel', function(event) {
          createQualityButton(event.qualityLevel, container);
        });

        qualityLevels.on('change', function(event) {
          for (var i = 0; i < qualityLevels.length; i++) {
            var level = qualityLevels[i];
            var button = document.getElementById('quality-level-' + level.id);

            button.classList.remove('selected');
          }

          var selected = qualityLevels[event.selectedIndex];
          var button = document.getElementById('quality-level-' + selected.id);
          button.classList.add('selected');
        })
      });
    }

    (function(window, videojs) {
      createPlayer(setup);
    })(window, window.videojs);
  </script>
</body>
</html>