Flv.js网页无插件(不使用flash播放)手把手教你使用

先放一张成果图稳定军心

• 可以调声音、全屏、画中画、暂停

flv.js手把手教你对接http-flv(使用Angular7,vue的话应该类似的)

• 不懂前端的vue，node.js这些东西，或不想麻烦怎么办？直接导入在线js文件！cdn网址：www.bootcdn.cn/flv.js/
• flv.js的在线导入代码：

<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.js"></script>

• 项目中上手配置

npm install --save flv.js

引入flv.js

• 直接上代码

import flvjs from 'flv.js/dist/flv.min.js'

• 上图-亲测引入flv.min.js不会报错 反之则会被语法检查错误

播放视频

• 上图

• 直接撸代码

  /**
   * @description flv视频播放
   */
  flvVideoPlayer() {
    if (this.httpSrc && flvjs.isSupported()) {
      if (this.flvPlayer) {
        this.flvPlayer.pause()
        this.flvPlayer.unload()
        this.flvPlayer.detachMediaElement()
        this.flvPlayer.destroy()
        this.flvPlayer = null
      }
      let videoElement = this.video.nativeElement
      this.flvPlayer = flvjs.createPlayer({
        type: 'flv',
        enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
        isLive: true, //直播模式
        hasAudio: true, //开启音频
        hasVideo: true,
        stashInitialSize: 128,
        enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
        url: this.httpSrc,
      })
      this.flvPlayer.attachMediaElement(videoElement)
      this.flvPlayer.load()
      this.flvPlayer.play()


      this.flvPlayer.on('error', (err) => {
        console.log('err-------------------', err)
      })
    }
  }

• html简洁写法

<video class="video" #videoElement id="videoElementflv" controls muted>
  播放失败
</video>

• 播放成果可以调声音、全屏、画中画、暂停

flv.js卸载(不这样卸载可能会有其他报错的可能，踩过坑)

• 上面代码有提及

 if (this.flvPlayer) {
      this.flvPlayer.pause()
      this.flvPlayer.unload()
      this.flvPlayer.detachMediaElement()
      this.flvPlayer.destroy()
      this.flvPlayer = null
}

最后一件事

如果您已经看到这里了，希望您还是点个赞再走吧~

您的点赞是对作者的最大鼓励，也可以让更多人看到本篇文章！