想要与hls.js和vue.js一起玩m3u8

如何解决想要与hls.js和vue.js一起玩m3u8

我正在尝试在codeandBox上使用hls.js和vue.js玩m3u8。

我这样用ffmpeg制作了m3u8。

ffmpeg -i movie1.mp4 -vcodec libx264 -s 1280x720 -strict experimental -acodec aac -b:a 96k -flags +loop-global_header -vbsf h264_mp4toannexb -f segment -segment_format mpegts -segment_time 10 -segment_list mav.m3u8 mav_%04d.ts

来自codeandBox的错误说 **您提供的错误不包含堆栈跟踪。 **

我也可以播放mp4或youtube，但不能播放m3u8。

这是我的代码

<template>
  <div>
    <video
      ref="video"
      id="video"
      controls
      webkit-playsinline
      preload="none"
      muted
      autoplay
    ></video>

    <p>window height: {{ height }}</p>
  </div>
</template>

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

export default {
  data() {
    return {
      hls: new Hls(),height: window.innerHeight,};
  },methods: {
    playVide() {
      this.height = window.innerHeight;
      const video = document.getElementById("video");

      if (Hls.isSupported()) {
        this.hls = new Hls();
        this.hls.loadSource(
          "SAMPLE.m3u8"
        );
        this.hls.attachMedia(video);
        setTimeout(() => {
          video.play();
        },1000);
      }
    },},mounted() {
    window.addEventListener("scroll",this.playVide);
  },};
</script>

我不确定是否会发生这种情况，因为我如何使用ffmpg或如何编写hls.js