vue播放m3u8插件使用hls.js

vue播放m3u8插件使用hls.js

之前写过vue使用 vue-video-player与 videojs-contrib-hls这两个插件，可以播放hls流视频，但是最近发现他只能读取流文件，返回的是视频切片文件ts的时候，他就无法读取，然后就找到了hls,解决了之前的问题

1.安装

npm install hls.js -S

使用

<template>
 <video    controls   class="video"   ref="video"    style="width:45rem" ></video>
 </template>
 <script>
let Hls = require("hls.js");
export default {
  data() {
    return {
      hls: null,
      videoUrl:"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
      },
      },
       mounted(){
         this.getStream();
         }，
       methods：{
            getStream() {
      if (Hls.isSupported()) {
        this.hls = new Hls();
        this.hls.loadSource(this.videoUrl);
        this.hls.attachMedia(this.$refs.video);
        this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
          console.log("加载成功");
          this.$refs.video.play();
        });
        this.hls.on(Hls.Events.ERROR, (event, data) => {
          console.log("加载失败");
        });
      } else if (
        this.$refs.video.canPlayType("application/vnd.apple.mpegurl")
      ) {
        this.$refs.video.src = this.videoUrl;
        this.$refs.video.addEventListener("loadedmetadata", function() {
          this.$refs.video.play();
        });
      }
     
      // 停止流
    videoPause() {
      if (this.hls) {
        this.$refs.video.pause();
        this.hls.destroy();
        this.hls = null;
      }
    },
    },
       }
      }
   <script>