时间戳

首页 > 解决方案 > 使用 .m3u8 文件中的 HLS 将质量级别设置为 Plyr 播放器

plyr - 使用 .m3u8 文件中的 HLS 将质量级别设置为 Plyr 播放器

问题描述

我在一个角度组件中使用 Plyr 播放器和 HLS 实现，我做了下面帖子中提到的所有设置

使用 HLS Stream 时向 plyr 添加质量选择器

尽管如此，我还是无法在 UI 中获得质量设置选项。单击齿轮图标后，仅显示 8 个选项的速度选项（0.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 播放器的质量级别吗？请帮忙

标签： plyrhttp-live-streaming

解决方案

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

推荐阅读