实现FLV,HLS(M3U8)视频播放

1.安装hls.js和flv.js
npm i hls.js flv.js

<template>
  <div>
    <video
      controls
      autoplay
      loop
      muted
      preload="auto"
      width="550"
      ref="videoEl"
    ></video>
    <el-button @click="playVideo(src)" type="primary">播放</el-button>
    <el-button @click="stopVideo()" type="primary">停止播放</el-button>
  </div>
</template>
<script>
import Hls from "hls.js";
import Flv from "flv.js";
export default {
  data() {
    return {
      flvPlayer: null,
      hls: null,
      // src: "http://www.w3school.com.cn/i/movie.mp4",
      // src: "https://live.video.weibocdn.com/848d6fd7-f77d-4315-aad8-097b89a8a19c_index.m3u8?ori=0&ps=1Cx9YB1mmR49jS&Expires=1713376596&ssig=ZLi1scc1Un&KID=unistore,video",
      src: "https://pull-flv-l1.douyincdn.com/third/stream-403202739025739814_or4.flv?keeptime=00093a80&wsSecret=0cef314b5f0b58fe34bb2f89b2766b07&wsTime=6625d053",
    };
  },
  methods: {
    playVideo(src) {
      if (src.includes(".m3u8")) {
        if (Hls.isSupported()) {
          this.hls = new Hls();
          this.hls.loadSource(src);
          this.hls.attachMedia(this.$refs.videoEl);
          this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
            this.$refs.videoEl.play();
          });
        } else if (
          this.$refs.videoEl.canPlayType("application/vnd.apple.mpegurl")
        ) {
          this.$refs.videoEl.src = src;
          this.$refs.videoEl.addEventListener("loadedmetadata", function () {
            this.$refs.videoEl.play();
          });
        }
      } else if (src.includes(".flv")) {
        if (Flv.isSupported()) {
          const flvPlayer = Flv.createPlayer({
            type: "flv",
            url: src,
          });
          flvPlayer.attachMediaElement(this.$refs.videoEl);
          flvPlayer.load();
          flvPlayer.play();
          this.flvPlayer = flvPlayer;
        }
      } else if (src.includes(".mp4")) {
        this.$refs.videoEl.src = src;
        this.$refs.videoEl.play();
      }
    },
    stopVideo() {
      this.$refs.videoEl.pause();
      if (this.flvPlayer) {
        this.flvPlayer.pause();
      }
    },
  },
};
</script>
<style lang="less" scoped>
</style>