使用flv.js播放视频

最新推荐文章于 2024-05-23 21:59:19 发布

是文静的

最新推荐文章于 2024-05-23 21:59:19 发布

阅读量4.4k

点赞数

文章标签： javascript 音视频前端 flv

本文链接：https://blog.csdn.net/qq_44091061/article/details/121774485

版权

npm install --save flv.js

在这里插入图片描述

<template>
  <div class="video">
   <video
       class="videoPlay"
       autoplay
       controls
       muted
       id="videoElement"
     ></video>
   </div>
</template>
<script>
import flvjs from 'flv.js'
export default {
  data () {
    return {
      flvPlayer: null,
      url: ''
    }
  },
  mounted () {
    this.$nextTick(() => {
      // url为播放视频的路径,type可以是 'flv',也可以是'mp4'
      this.createVideo ('', '')
    }
  },
  beforeDestroy () {
    if (this.flvPlayer) {
      this.destoryVideo(this.flvPlayer)
    }
  },
  methods: {
    createVideo (url, type) {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement')
        this.flvPlayer = flvjs.createPlayer(
          {
            type: type,
            isLive: true,
            hasAudio: false,
            url: url
          },
          {
            enableWorker: false, // 不启用分离线程
            enableStashBuffer: false, // 关闭IO隐藏缓冲区
            reuseRedirectedURL: true, // 重用301/302重定向url，用于随后的请求，如查找、重新连接等。
            autoCleanupSourceBuffer: true, // 自动清除缓存
            fixAudioTimestampGap: false
          }
        )

        this.flvPlayer.attachMediaElement(videoElement)
        // this.flvPlayer.load();

        if (this.url !== '' && this.url !== null) {
          this.flvPlayer.load()
          this.flvPlayer.play()
        }
      }
      this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
        // alert('网络波动,正在尝试连接中...');
        if (this.flvPlayer) {
          this.reloadVideo(this.flvPlayer)
        }
      })
    },
    reloadVideo (flvPlayer) {
      this.destoryVideo(flvPlayer)
      // this.url为视频播放的路径
      this.createVideo(this.url, 'flv')
    },
    destoryVideo (flvPlayer) {
      flvPlayer.pause()
      flvPlayer.unload()
      flvPlayer.detachMediaElement()
      flvPlayer.destroy()
      flvPlayer = null
    }
  }
}
</script>
<style lang='less' scoped>
</style>