flv项目地址
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
import flv from "flv.js";
功能类
创建flv播放器
let player = flv.createPlayer(mediaDataSource: MediaDataSource, config?: Config);
createPlayer()方法有两个参数,MediaDataSource
和config
两个参数,MediaDataSource
必传,config
可传可不传,返回值为player
;
MediaDataSource
属性 | 类型 | 描述 |
|
| 指示媒体类型, |
|
| 指示数据源是否为实时流 |
|
| 指示是否启用CORS进行http提取 |
|
| 指示是否对Cookie进行http提取 |
|
| 指示流是否有音轨 |
|
| 指示流中是否有视频轨道 |
|
| 指示总媒体持续时间(以毫秒为单位) |
|
| 指示媒体文件的总文件大小,以字节为单位 |
|
| 表示媒体URL,可以以 |
|
| 多段播放的可选字段,请参见MediaSegment |
如果segments
存在字段,则transmuxer会将其MediaDataSource
视为多部分源。
在多部分模式下,结构中的duration
filesize
url
字段MediaDataSource
将被忽略。
MediaSegment
属性 | 类型 | 描述 |
|
| 必填字段,表示段持续时间(以毫秒为单位) |
|
| 可选字段,以字节为单位指示段文件大小 |
|
| 必填字段,指示段文件URL |
Config
属性 | 类型 | 默认值 | 描述 |
|
|
| 启用分离的线程进行转换(暂时不稳定) |
|
|
| 启用IO隐藏缓冲区。如果您需要实时(最小延迟)进行实时流播放,则设置为false,但是如果网络抖动,则可能会停顿。 |
|
|
| 表示IO暂存缓冲区的初始大小。默认值为 |
|
|
| 同样要 |
|
|
| 如果有足够的数据可播放,则中止http连接。 |
|
|
| 指示要保留多少秒的数据 |
|
|
| 指示 |
|
|
| 在MediaSource |
|
|
| 对SourceBuffer进行自动清理 |
|
|
| 当向后缓冲区持续时间超过此值(以秒为单位)时,请对SourceBuffer进行自动清理 |
|
|
| 指示进行自动清除时为反向缓冲区保留的持续时间(以秒为单位)。 |
|
|
| 当检测到较大的音频时间戳间隙时,请填充无声音频帧,以避免A / V不同步。 |
|
|
| 精确查找任何帧,不限于视频IDR帧,但可能会慢一些。可用的 |
|
|
|
|
|
|
| 指示的搜索起始参数名称 |
|
|
| 指示的搜索结束参数名称 |
|
|
|
|
|
|
| 指示自定义搜索处理程序 |
|
|
| 重复使用301/302重定向的url进行子序列请求,例如搜索,重新连接等。 |
|
|
| 指示使用FetchStreamLoader时的推荐人策略 |
|
|
| 指示将添加到请求的其他标头 |
flv.isSupported()
function isSupported(): boolean;
player
实例存在返回true
,否则返回fasle
flv.getFeatureList()
function getFeatureList(): FeatureList;
返回 FeatureList
对象
FeatureList
属性 | 类型 | 描述 |
|
| 等同于 |
|
| 指示HTTP FLV实时流是否可以在您的浏览器上工作。 |
|
| 指示网络加载程序是否正在流式传输。 |
|
| 指示网络加载程序类型名称。 |
|
| 指示您的浏览器是否本身支持H.264 MP4视频文件。 |
|
| 指示您的浏览器是否本机支持WebM VP8视频文件。 |
|
| 指示您的浏览器是否本机支持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参见官方文档
注:本文仅供学习交流使用,若有侵权,请联系作者删除