html5视频下拉菜单质量hls.js

Question

我使用标签html5 video + hls.js视频流。m3u8

<div class="container-video"> 
<video id="video" 
width="700" 
height="400"
preload="auto" 
controls>
<source [src]="videoLink" type="application/x-mpegURL">
</video>
</div>
playVideoLive(videoLink) {
const video = document.getElementsByTagName('video')[0];
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoLink);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoLink;
video.addEventListener('canplay', function () {
video.play();
});
}
}

如何显示下拉列表的质量视频?

Answer 1

您可以使用一个额外的包来添加一个轨道选择器-可能还有其他的，但这个似乎很流行:https://www.npmjs.com/package/videojs-hls-quality-selector

您也可以添加自己的控件，并通过API使用:https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlscurrentlevel

这里有一个使用API的演示(在撰写本文时)-转到演示页面的底部查看级别，您可以在那里单击它们:https://hls-js-dev.netlify.app/demo/