flv项目地址

bilibili flv.js

安装依赖

1
npm install --save flv.js

vue页面

1
2
3
4
5
6
7
8
9
10
11
 <div class="video">
      <video
       id="vPull"
       controls
       autoplay
       muted
       width="100%"
       height="100%">
      </video>
 </div>
</template>

Js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script>
import flv from "flv.js";
export default {
  name: "",
  data() {
    return {
      player: null,
    };
  },
  methods: {
    play(urls) {
      let video = document.getElementById("vPull"); //定义播放路径
      if (flv.isSupported()) {
        this.player = flv.createPlayer(
          {
            type: "flv",
            isLive: true,
            url: urls,
          },
          {
            enableWorker: false, //不启用分离线程
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            isLive: true,
            lazyLoad: false,
          }
        );
      } else {
        console.log("不支持的格式");
        return;
      }
      this.player.attachMediaElement(video);
      this.player.load();
      this.player.play();
    },
    destruction() {
      //销毁对象
      if (this.player) {
        this.player.pause();
        this.player.destroy();
        this.player = null;
      }
    },
  },
  created() {
    this.play('http://1011.hlsplay.aodianyun.com/demo/game.flv');
  }
};
</script>

API

1
import flv from "flv.js";

创建flv播放器

1
let player = flv.createPlayer(mediaDataSource: MediaDataSource, config?: Config);

createPlayer()方法有两个参数，MediaDataSource和config两个参数，MediaDataSource必传，config可传可不传，返回值为player;

MediaDataSource

属性 类型 描述
type string 指示媒体类型，'flv'或'mp4'
isLive? boolean 指示数据源是否为实时流
cors? boolean 指示是否启用CORS进行http提取
withCredentials? boolean 指示是否对Cookie进行http提取
hasAudio? boolean 指示流是否有音轨
hasVideo? boolean 指示流中是否有视频轨道
duration? number 指示总媒体持续时间（以毫秒为单位）
filesize? number 指示媒体文件的总文件大小，以字节为单位
url? string 表示媒体URL，可以以'https(s)'或'ws(s)'``（WebSocket）开头
segments? Array 多段播放的可选字段，请参见MediaSegment

如果segments存在字段，则transmuxer会将其MediaDataSource视为多部分源。

在多部分模式下，结构中的duration filesize url字段MediaDataSource将被忽略。

MediaSegment

属性 类型 描述
duration number 必填字段，表示段持续时间（以毫秒为单位）
filesize? number 可选字段，以字节为单位指示段文件大小
url string 必填字段，指示段文件URL

Config

属性 类型 默认值 描述
enableWorker boolean FALSE 启用分离的线程进行转换（暂时不稳定）
enableStashBuffer boolean TRUE 启用IO隐藏缓冲区。如果您需要实时（最小延迟）进行实时流播放，则设置为false，但是如果网络抖动，则可能会停顿。
stashInitialSize number 384KB 表示IO暂存缓冲区的初始大小。默认值为384KB。指出合适的尺寸可以改善视频负载/搜索时间。
isLive boolean FALSE 同样要isLive在MediaDataSource，如果忽略已经在MediaDataSource结构集合。
lazyLoad boolean TRUE 如果有足够的数据可播放，则中止http连接。
lazyLoadMaxDuration number 3 * 60 指示要保留多少秒的数据lazyLoad。
lazyLoadRecoverDuration number 30 指示lazyLoad恢复时间边界，以秒为单位。
deferLoadAfterSourceOpen boolean TRUE 在MediaSourcesourceopen事件触发后加载。在Chrome上，在后台打开的标签页可能不会触发sourceopen事件，除非切换到该标签页。
autoCleanupSourceBuffer boolean FALSE 对SourceBuffer进行自动清理
autoCleanupMaxBackwardDuration number 3 * 60 当向后缓冲区持续时间超过此值（以秒为单位）时，请对SourceBuffer进行自动清理
autoCleanupMinBackwardDuration number 2 * 60 指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）。
fixAudioTimestampGap boolean TRUE 当检测到较大的音频时间戳间隙时，请填充无声音频帧，以避免A / V不同步。
accurateSeek boolean FALSE 精确查找任何帧，不限于视频IDR帧，但可能会慢一些。可用的Chrome > 50，FireFox和Safari。
seekType string range range‘使用范围请求进行查找，或’param’在url中添加参数以指示请求范围。
seekParamStart string bstart 指示的搜索起始参数名称 seekType = 'param'
seekParamEnd string bend 指示的搜索结束参数名称 seekType = 'param'
rangeLoadZeroStart boolean FALSE Range: bytes=0-如果使用范围查找，则发送首次负载
customSeekHandler object undefined 指示自定义搜索处理程序
reuseRedirectedURL boolean FALSE 重复使用301/302重定向的url进行子序列请求，例如搜索，重新连接等。
referrerPolicy string no-referrer-when-downgrade 指示使用FetchStreamLoader时的推荐人策略
headers object undefined 指示将添加到请求的其他标头

flv.isSupported()

1
function isSupported(): boolean;

player实例存在返回true，否则返回fasle

flv.getFeatureList()

1
function getFeatureList(): FeatureList;

返回 FeatureList 对象

FeatureList

属性 类型 描述
mseFlvPlayback boolean 等同于flv.isSupported()
mseLiveFlvPlayback boolean 指示HTTP FLV实时流是否可以在您的浏览器上工作。
networkStreamIO boolean 指示网络加载程序是否正在流式传输。
networkLoaderName string 指示网络加载程序类型名称。
nativeMP4H264Playback boolean 指示您的浏览器是否本身支持H.264 MP4视频文件。
nativeWebmVP8Playback boolean 指示您的浏览器是否本机支持WebM VP8视频文件。
nativeWebmVP9Playback boolean 指示您的浏览器是否本机支持WebM VP9视频文件。

Player对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
interface Player {
    constructor(mediaDataSource: MediaDataSource, config?: Config): Player;
    destroy(): void;
    on(event: string, listener: Function): void;
    off(event: string, listener: Function): void;
    attachMediaElement(mediaElement: HTMLMediaElement): void;
    detachMediaElement(): void;
    load(): void;//加载
    unload(): void;//卸载
    play(): Promise<void>;//播放
    pause(): void;//暂停
    type: string;
    buffered: TimeRanges;
    duration: number;
    volume: number;
    muted: boolean;
    currentTime: number;
    mediaInfo: Object;
    statisticsInfo: Object;
}

其余API参见bibilibi flv.js官方文档