【vue2】vue项目中使用flvjs播放视频

安装

# 安装
npm install flv.js

# 组件内引入
import flvjs from 'flv.js'

vue单文件

<template>
  <div>
    <video
      id="videoElement"
      controls
      autoplay
      muted
      width="300px"
      height="200px"
    ></video>
    <button @click="play">播放</button>
  </div>
</template>
<script>
import flvjs from "flv.js";
export default {
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      flvPlayer: null,
    };
  },
  mounted() {
    if (flvjs.isSupported()) {
      var videoElement = document.getElementById("videoElement");
      this.flvPlayer = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        hasAudio: false,
        url: "https://sample-videos.com/video321/flv/720/big_buck_bunny_720p_1mb.flv",
      });
      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.load();
      this.flvPlayer.play();
    }
  },
  beforeDestroy() {
    this.destoryVideo(this.flvPlayer);
  },
  methods: {
    play() {
      this.flvPlayer.play();
    },
    destoryVideo(flvPlayer) {
      if (flvPlayer) {
        flvPlayer.pause();
        flvPlayer.unload();
        flvPlayer.detachMediaElement();
        flvPlayer.destroy();
        flvPlayer = null;
      }
    },
  },
};
</script>

效果图

播放失败原因

协议不支持
在一开始我以为flvjs可以播放所有flv格式的视频流，但是经过测试和查看文档发现，这个包仅支持HTTPFLV协议的流，如果使用RTMP协议的流则依然需要使用flash插件。
支持：http://www.xxxxxxx.com:18080/11/22.flv
不支持：rtmp://www.xxxxx.com/api/6538-1.1567494734966.flv

参卡文章：vue项目中使用flvjs播放视频

下班~