用vuejs项目实现hls.js库

Question

我需要一些帮助，试图找出如何在vuejs中使用hls.js库，因为它没有关于如何使用vue实现它的特定文档。这里的情况是，我必须从一个api中获取m3u8，我可以用标记和cdn使它从一个基本的html中工作，但是当我尝试用vuejs实现它时，它不起作用，任何帮助都是值得感谢的。我尝试了两个实现，每次都得到相同的错误。到目前为止，这就是我所掌握的：

首先尝试：使用cdn并包含在it组件中

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 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>