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

神似彭于晏的男人

已于 2024-01-12 16:24:02 修改

阅读量1.2k

点赞数 7

分类专栏：前端开发功能库文章标签： javascript vue.js 音视频

于 2024-01-12 14:37:54 首次发布

本文链接：https://blog.csdn.net/m0_56023096/article/details/135551002

版权

前端开发功能库专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何在前端使用video.js及其flv.js扩展来实现视频播放，包括安装依赖、引入组件、设置播放器选项以及处理不同视频格式。作者展示了如何在Vue组件中初始化、更新和销毁video.js实例。

摘要由CSDN通过智能技术生成

前端安装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>