vue使用video.js依赖接入视频流(hls(m3u8)、flv)_video.js的依赖

前端安装video.js相关依赖

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

组件引入video.js依赖

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

组件中使用video.js播放视频

html部分

// 视频标签容器
<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>

js部分

<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 = {
          // 初始化默认宽高，避免第一次加载闪一下
          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("播放器准备好了");
        });
      });
    },
    
    // 重新加载播放器，适用于tab栏切换更换视频流数据
    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>

sources配置描述(更改type值即可播放对应的视频格式)

效果演示