javascript - 用vuejs项目实现hls.js库

Question

我需要一些帮助来弄清楚如何使用 hls.js vuejs 中的库，因为它没有关于如何使用 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>