主页 / 问题 / 954645
Accepted
steep
Asked:2020-03-10 19:41:42 +0800 CST2020-03-10 19:41:42 +0800 CST

如何将多个 m3u8 播放列表连接到播放器？

  • 772

如何在播放器中插入多个不同视频质量 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

javascript

1 个回答

  1. Best Answer
    1. Plyr 查找子元素，查找<source>，并基于它构建播放器菜单。
    2. 选择质量时，Plyr 将所选选项写入事件源。
    3. 事件可以changequality捕获事件，提取新资源并将其写入<video src="">和写入hls.loadSource
    4. 它仍然只是重新连接video并hls通过hls.attachMedia(video)

    你可能需要hls.detachMedia()先做，但我可能是错的。为了使用自己的资源，只需替换块中的<source>属性<src>

    ps 在示例中，出于演示目的，有 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>

    • 2

相关问题