// video.js
npm install video.js
// 安裝flv，用于播放 FLV
npm install videojs-flvjs-es6
npm install flv.js

import videojs from "video.js";
import "videojs-flvjs-es6";
import "video.js/dist/video-js.css";

// 視頻標(biāo)簽容器
<template>
  <div style="width: 100%; height: 100%" id="videoBottom">
    <video
      id="videoPlayer"
      class="video-js vjs-fluid vjs-big-play-centered"
      style="width: 100%; height: 100%; object-fit: fill"
      controls
      preload="auto"
      muted
      autoplay
      loop
    ></video>
  </div>
</template>

<script>
import videojs from "video.js";
import "videojs-flvjs-es6";
import "video.js/dist/video-js.css";
 
export default {
  data() {
    return {
      myVideo: null,
    };
  },
  methods: {
    initVideo() {
      this.$nextTick(() => {
        const options = {
          // 初始化默認(rèn)寬高，避免第一次加載閃一下
          width: 660,
          height: 345,
          fullscreen: {
            options: { navigationUI: "hide" },
          },
          techOrder: ["html5", "flvjs"], // 兼容順序
          // 配置支持播放hls格式視頻流
          html5: {
            hls: {
              withCredentials: true,
            },
          },
          // 配置支持播放flv格式視頻流
          flvjs: {
            mediaDataSource: {
              isLive: false,
              cors: true,
              withCredentials: false,
            },
          },
          sources: [
            {
              src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
              type: "application/x-mpegURL",
            },
          ],
        };
        const videElement = document.getElementById(`videoPlayer`);
 
        this.myVideo = videojs(videElement, options, function onPlayerReady() {
          videojs.log("播放器準(zhǔn)備好了");
        });
      });
    },
    
    // 重新加載播放器，適用于tab欄切換更換視頻流數(shù)據(jù)
    updateVideoPlay() {
      const myVideoDiv = document.getElementById("videoBottom");
      myVideoDiv.innerHTML =
        "<video id='videoPlayer' class='video-js vjs-default-skin vjs-big-play-centered' controls muted autoplay style='width: 100%;height: 100%; object-fit: fill'></video>";
    }
  },
  mounted() {
    this.initVideo();
  },
  destroyed() {
    this.myVideo.dispose(); // 銷毀視頻
  },
};
</script>