如何解决使用 .m3u8 文件中的 HLS 为 Plyr 播放器设置质量级别
我在角度组件中使用 Plyr 播放器和 HLS 实现,我做了下面帖子中提到的所有设置
Adding Quality Selector to plyr when using HLS Stream
仍然无法在 UI 中获得质量设置选项。单击齿轮图标后,仅显示 8 个选项的速度选项(.75 到 4 )。对于 .m3u8 文件,即使我将质量级别设置为播放器质量选项,它也不会显示在 UI 中。
在控制台中,从 player.config.speed 属性中,我可以找到播放器 UI 中显示的速度选项,但 player.config.quality 在构建值中显示一些,例如 { default: 576,options: [4320,2880,2160,1440,1080,720,576,480,360,240] } 与plyr README.md文件相同
我尝试从 Hls.Event.Manifest.Parsed 事件设置质量级别。
有人知道如何将 .m3u8 文件的质量级别设置为 Plyr 播放器吗?请帮忙
解决方法
这是我的第一篇 stackoverflow 帖子。 抱歉,我不知道 angular,但我是用 vue 创建的。 我对 codepen 片段做了一些修改,它对我有用。
<template>
<video ref="video" controls crossorigin playsinline>
<source
ref="source"
type="application/x-mpegURL"
src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
/>
</video>
</template>
<script>
import Hls from 'hls.js'
import Plyr from 'plyr'
import 'vue-plyr/dist/vue-plyr.css'
export default {
mounted() {
const video = this.$refs.video
const source = this.$refs.source.src
const defaultOptions = {}
if (!Hls.isSupported()) {
video.src = source
} else {
const hls = new Hls()
hls.loadSource(source)
hls.on(Hls.Events.MANIFEST_PARSED,function (event,data) {
const availableQualities = hls.levels.map((l) => l.height)
defaultOptions.quality = {
default: availableQualities[0],options: availableQualities,forced: true,onChange: (e) => updateQuality(e),}
defaultOptions.captions = {
active: true,update: true,language: 'en',}
const player = new Plyr(video,defaultOptions)
player.on('languagechange',() => {
setTimeout(() => (hls.subtitleTrack = player.currentTrack),50)
})
hls.attachMedia(video)
window.hls = hls
window.player = player
})
function updateQuality(newQuality) {
hls.levels.forEach((level,levelIndex) => {
if (level.height === newQuality) {
hls.currentLevel = levelIndex
}
})
}
}
},}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。