vue使用flv.js(bilibili)拉流

flv项目地址

bilibili / flv.js

flv优化

flv.js解决直播流延迟、断流重连以及画面卡死

如何使用

安装依赖

npm install --save flv.js

vue页面

<template>
 <div class="video">
      <video
       id="vPull"
       controls
       autoplay
       muted
       width="100%"
       height="100%">
      </video>
 </div>
</template>

js部分

<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

原文件（api.md）

import flv from "flv.js";

功能类

创建flv播放器

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()

function isSupported(): boolean;

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

flv.getFeatureList()

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对象

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参见官方文档

注：本文仅供学习交流使用，若有侵权，请联系作者删除