3

Как вставить в плеер несколько плейлистов с разным качеством видео 360 480 ? На сайте разработчика написано вставить в html.

Другими словами нужно эти 2 плейлиста подключить к скрипту

<video controls crossorigin playsinline 
    poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" 
    id="player">
<source
    src="https://bl.webcaster.pro/media/playlist/a13deaa5721c831a2b68b6983ff0100e/2_70430/480p/ca9b9125037cd539b61a2ff46366f6b0/1552260702.m3u8"
    type="video/mp4"
    size="480"
/>
<source
    src="https://bl.webcaster.pro/media/playlist/a13deaa5721c831a2b68b6983ff0100e/2_70430/360p/ca9b9125037cd539b61a2ff46366f6b0/1552260702.m3u8"
    type="video/mp4"
    size="360"
/>
</video>

Пример с одним плейлистом

document.addEventListener('DOMContentLoaded', () => {
	
	const source = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';	
	
	const video = document.querySelector('video');
	
	// For more options see: https://github.com/sampotts/plyr/#options
	// captions.update is required for captions to work with hls.js
	const player = new Plyr(video, {captions: {active: true, update: true, language: 'en'}});
	
	if (!Hls.isSupported()) {
		video.src = source;
	} else {
		// For more Hls.js options, see https://github.com/dailymotion/hls.js
		const hls = new Hls();
		hls.loadSource(source);
		hls.attachMedia(video);
		window.hls = hls;
		
		// Handle changing captions
		player.on('languagechange', () => {
			// Caption support is still flaky. See: https://github.com/sampotts/plyr/issues/994
			setTimeout(() => hls.subtitleTrack = player.currentTrack, 50);
		});
	}
	
	// Expose player so it can be used from the console
	window.player = player;
});
.container {
	margin: 40px auto;
	width: 400px;
}
video {
	width: 100%;
}
<link rel="stylesheet" type="text/css" href="https://unpkg.com/plyr@3/dist/plyr.css">
<script src="https://unpkg.com/plyr@3"></script>
<div class="container">
	<video controls crossorigin playsinline poster="https://bitdash-a.akamaihd.net/content/sintel/poster.png"></video>
</div>
<script src="https://cdn.rawgit.com/video-dev/hls.js/18bb552/dist/hls.min.js"></script>

Это мой пример https://codepen.io/stopani/pen/ZPyNKg Документация https://github.com/sampotts/plyr

1 ответ 1

2
+100
  1. Plyr смотрит в дочерние элементы, ищет <source>, на основе которых строит меню плеера.
  2. При выборе качества Plyr записывает в евент сурс, выбранного варианта.
  3. Эвентом changequality можно поймать событие, вытащить новый сурс и записать его в <video src=""> и в hls.loadSource
  4. Остается только переаттачить video и hls через hls.attachMedia(video)

Возможно, предварительно надо hls.detachMedia() делать, но я могу и ошибаться. Для того, чтобы использовать свои сурсы, просто замените в блоках <source> атрибут <src>

p.s. В примере указаны 2 одинаковых линка с одинаковым качеством для демонстрации.

document.addEventListener('DOMContentLoaded', () => {
    let video = document.querySelector('video');
    //source берем из аттрибута первого <source>
    video.source = video.children[0].getAttribute("src")

    let player = new Plyr(video, { captions: { active: true, update: true, language: 'en' } });
    let hls = new Hls();

    if (Hls.isSupported()) {
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, function() {
            hls.loadSource(video.source);
        });
    }
    //Эвент смены сурса
    player.on('qualitychange', event => {
        video.source = event.detail.plyr.source;
        hls.loadSource(video.source)
        hls.attachMedia(video);
    });
    
    window.player = player;
})
.container {
	margin: 40px auto;
	width: 400px;
}
video {
	width: 100%;
}
<link rel="stylesheet" type="text/css" href="https://unpkg.com/plyr@3/dist/plyr.css">
<script src="https://unpkg.com/plyr@3"></script>
<div class="container">
	<video controls crossorigin playsinline poster="https://bitdash-a.akamaihd.net/content/sintel/poster.png">
  <source
    src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
    type="video/mp4"
    size="480"
/>
<source
    src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
    type="video/mp4"
    size="360"
/>
  
  </video>
</div>
<script src="https://cdn.rawgit.com/video-dev/hls.js/18bb552/dist/hls.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.