使用 vuejs 项目实现 hls.js 库

Question

我需要一些帮助来尝试弄清楚如何在 vuejs 中使用hls.js库，因为它没有关于如何使用 vue 实现它的具体文档。这里的情况是，我必须从 api 获取 m3u8 我可以使用标签和 cdn 使其从基本 html 工作，但是当我尝试使用 vuejs 实现它时，它不起作用，感谢任何帮助。我尝试了 2 种实现，每次都遇到相同的错误。这些是我到目前为止所得到的：

第一次尝试：使用 cdn 并包含在其组件中

export default {
  head() {
     return {
       script: [
         {
           src: 'https://cdn.jsdelivr.net/npm/hls.js@latest'
         }
       ],
     }
   }}

在created()中使用函数

    checkHLS(){
      console.log('in');
      if (Hls.isSupported()) {
        console.log('working')
      }
    },

第二次尝试使用 npm 安装软件包

npm install --save hls.js

我收到了这个错误

                                  Hls is not defined
An error occurred while rendering the page. Check developer tools console for details.

Answer 1

通过 npm 安装 hls.js： npm i --save hls.js@latest

以下是在组件中使用它的方法：

<template>
  <video ref="video" width="100%" height="640" controls></video>
</template>

<script>
import Hls from 'hls.js';

export default {
  mounted() {
    let hls = new Hls();
    let stream = "http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8";
    let video = this.$refs["video"];
    hls.loadSource(stream);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
      video.play();
    });
  },
};
</script>