快捷導(dǎo)航

vue使用video.js依賴接入視頻流((hls(m3u8)、flv))的示例代碼

更新時間：2024年01月14日 10:48:42 作者：神似彭于晏的程序猿

這篇文章給大家介紹了vue如和使用video.js依賴接入視頻流((hls(m3u8)、flv)),文章通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

前端安裝video.js相關(guān)依賴

// 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部分

// 視頻標(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>

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 = {
          // 初始化默認(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>

sources配置描述(更改type值即可播放對應(yīng)的視頻格式)