用.m3u8文件中的HLS设置Plyr播放器的质量级别

Question

我在一个angular组件中使用Plyr player和HLS实现，我完成了下面帖子中提到的所有设置

Adding Quality Selector to plyr when using HLS Stream

我仍然无法在UI中获得质量设置选项。单击齿轮图标后，仅显示速度选项和8个选项(.75至4 )。对于.m3u8文件，即使我将质量级别设置为播放器质量选项，它也不会在UI中显示。

在控制台中，从player.config.speed属性中，我可以找到播放器UI中显示的速度选项，但player.config.quality显示了一些内部值，如{默认值: 576，选项: 4320,2880,2160,1440,1080,720,576,480,360,240 }与plyr README.md文件相同

我尝试从Hls.Event.Manifest.Parsed事件设置质量级别。

谁知道如何设置从.m3u8文件到Plyr播放器的质量级别？请帮帮忙

Answer 1

这是我的第一篇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
          }
        })
      }
    }
  },
}