vue中播放flv格式视频

安装flv.js

  cnpm i flv.js@1.6.2
  或
  npm i flv.js@1.6.2

引入

import flvjs from 'flv.js'

完整代码

<template>
  <div class="myVideo-video">
    <video id="myFlvVideo" autoplay controls />
  </div>
</template>

<script>
import flvjs from 'flv.js'
export default {
  beforeDestroy () {
    this.destoryVideo()
  },
  mounted () {
     let url = 'flv格式视频地址'
    this.createVideo (url)
  },
  methods: {
    createVideo (url) {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('myFlvVideo')
        this.flvPlayer = flvjs.createPlayer(
          {
            type: 'flv',
            url: url,
          },
          {
            cors: true, // 是否跨域
            // enableWorker: true, // 是否多线程工作
            // enableStashBuffer: false, // 是否启用缓存
            // stashInitialSize: 128, // 缓存大小(kb)  默认384kb
            // autoCleanupSourceBuffer: true // 是否自动清理缓存
          }
        )
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load()
        this.flvPlayer.play()
      }
    },
    destoryVideo () {
      this.flvPlayer.pause()
      this.flvPlayer.unload()
      this.flvPlayer.detachMediaElement()
      this.flvPlayer.destroy()
      this.flvPlayer = null
    },
  }
}
</script>

<style lang="scss" scoped>
.myVideo-video {
  width: 500px;
  height: 400px;

  video {
    border: 1px solid #000;
    width: 100%;
    height: 100%;
  }
}
</style>

flv.js api文档

参考: https://www.jianshu.com/p/5075dc581bba