Добавление селектора качества в plyr при использовании HLS Stream - PullRequest
Новая
       73

Добавление селектора качества в plyr при использовании HLS Stream

0 голосов
/ 19 апреля 2020

Я использую plyr в качестве оболочки для видео тега HTML5 и использую Hls. js для потоковой передачи моего видео .m3u8.

Я решил много проблем с plyr, чтобы включить качественные селекторы, и нашел несколько PR, у которых был этот вопрос, но он был закрыт, говоря, что реализация объединена, пока я не нашел этот PR , который говорит, что он все еще открыт, но в Комментариях была специальная реализация, которая гарантировала, что это работает. Я пробовал эту реализацию локально, чтобы проверить, можем ли мы добавить селектор качества, но мне кажется, что я что-то упустил / или реализация не работает. 

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>HLS Demo</title>
      <link rel="stylesheet" href="https://cdn.plyr.io/3.5.10/plyr.css" />
      <style>
         body {
         max-width: 1024px;
         }
      </style>
   </head>
   <body>
      <video preload="none" id="player" autoplay controls crossorigin></video>
      <script src="https://cdn.plyr.io/3.5.10/plyr.js"></script>
      <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
      <script>
         (function () {
         	var video = document.querySelector('#player');
         	var playerOptions= {
         		quality: {
         			default: '720',
         			options: ['720']
         		}
         	};
         	var player;
         	 player = new Plyr(video,playerOptions);
         	if (Hls.isSupported()) {
         		var hls = new Hls();
         		hls.loadSource('https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8');
         				//hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
         	hls.attachMedia(video);
         	hls.on(Hls.Events.MANIFEST_PARSED,function(event,data) {
  
 // uncomment to see data here 
//                   		console.log('levels', hls.levels);  we get data here but not able to see in settings . 
          
         		playerOptions.quality = {
         			default: hls.levels[hls.levels.length - 1].height,
         			options: hls.levels.map((level) => level.height),
         			forced: true,
             // Manage quality changes
             onChange: (quality) => {
             	console.log('changes',quality);
             	hls.levels.forEach((level, levelIndex) => {
             		if (level.height === quality) {
             			hls.currentLevel = levelIndex;
             		}
             	});
             }
         };
        });
       }
         
          // Start HLS load on play event
          player.on('play', () => hls.startLoad());
         
          // Handle HLS quality changes
          player.on('qualitychange', () => {
          	console.log('changed');
          	if (player.currentTime !== 0) {
          		hls.startLoad();
          	}
          });
         })();
         
      </script>
   </body>
</html>

Приведенный выше фрагмент работает, пожалуйста, запустите, но также, если вы раскомментируете строку в манифесте HLS, вы увидите, что мы получаем данные по уровням, а также передаем данные игроку Параметры, но это не так, в настройках. Как мы можем добавить селектор качества в plyr при использовании потока Hls.

...