上篇文章我们讲到了使用hls.js播放m3u8格式视频流；本以为万事大吉，后来才发现是我错了，我远远低估了客户提需求的能力，今天说还需要支持播放flv格式的视频流，在我一番折腾之下，终于找到了解决办法。

• 我们使用bilibili开源的flv.js来实现，参考地址：https://github.com/Bilibili/flv.js。

本文以angular为例，如需在vue等前端框架中使用，只需把对应的生命周期、事件绑定、变量声明等改为vue语法即可！

• 下面为使用步骤：

1、使用npm安装flv.js；

npm install --save flv.js

2、在HTML文件中添加对应标签；

<video controls autoplay="autoplay" muted="muted" id="videoElement">
    <source type="video/mp4">
</video>
<button (click)="play()">播放</button>

3、在ts文件中使用。

//引用
import * as flvjs from 'flv.js';

//声明两个变量
player: any;
flvPlayer: any;

//页面初始化
ngOnInit() {
  if (flvjs.default.isSupported()) {
    // 获取DOM对象
    this.player = document.getElementById('videoElement');
    // 创建flvjs对象
    this.flvPlayer = flvjs.default.createPlayer({
      type: 'flv',        // 指定视频类型
      isLive: true,       // 开启直播
      hasAudio: false,    // 关闭声音
      cors: true,         // 开启跨域访问
      url: '你的视频地址',   // 指定流链接
    });
    // 将flvjs对象和DOM对象绑定
    this.flvPlayer.attachMediaElement(this.player);
  }
}

// 播放视频
play(){
  this.flvPlayer.load();  // 加载视频
  this.flvPlayer.play();  // 播放
}

//页面退出销毁和暂停播放
ngOnDestroy(){
  this.flvPlayer.pause();
  this.flvPlayer.unload();
  // 卸载DOM对象
  this.flvPlayer.detachMediaElement();
  // 销毁flvjs对象
  this.flvPlayer.destroy();
}

最终效果图如下：

flv.png

至此，功能实现，特此记录！