flv.js的具体使用

lichongyang

2 天前

好的，我给你整理一份 flv.js 的完整使用指南与示例，从基础到进阶，适合网页播放 FLV 视频流（主要用于 HTTP-FLV / HLS 的前端播放）。

1. flv.js 简介

flv.js 是一个纯前端 JavaScript FLV 播放库，基于 Media Source Extensions (MSE) 实现播放。
特点：
- 支持 HTTP-FLV 流式播放
- 纯前端，不依赖 Flash
- 可在 Chrome/Firefox/Edge 等现代浏览器播放 FLV
- 支持直播和点播

官网/GitHub：https://github.com/bilibili/flv.js

2. 安装

① CDN 引入

&lt;script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js">&lt;/script>

② NPM 安装

npm install flv.js

import flvjs from 'flv.js';

3. 基本使用

HTML：

&lt;video id="videoElement" controls width="640" height="360">&lt;/video>

JavaScript：

if (flvjs.isSupported()) {
    var videoElement = document.getElementById('videoElement');
    var flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'https://example.com/live/stream.flv'  // HTTP-FLV URL
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();
}

解释：

type: 'flv'：指定 FLV 类型
url：HTTP-FLV 视频地址
attachMediaElement(videoElement)：绑定 HTML5 <video> 标签
load()：加载视频
play()：播放

4. 直播 FLV 示例

var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    isLive: true,                // 表示这是直播流
    url: 'https://example.com/live/stream.flv'
});

flvPlayer.attachMediaElement(document.getElementById('videoElement'));
flvPlayer.load();
flvPlayer.play();

参数说明：

isLive: true → 开启直播模式，禁用缓存和预加载
url → FLV 直播流 HTTP 地址

5. 事件监听

flv.js 提供丰富事件接口：

flvPlayer.on(flvjs.Events.LOADING_COMPLETE, function() {
    console.log('视频加载完成');
});

flvPlayer.on(flvjs.Events.ERROR, function(type, detail, info) {
    console.error('播放错误', type, detail, info);
});

flvPlayer.on(flvjs.Events.MEDIA_INFO, function(mediaInfo) {
    console.log('媒体信息', mediaInfo);
});

常用事件：

LOADING_COMPLETE → 数据加载完成
ERROR → 播放错误
MEDIA_INFO → 视频音频信息
STALLED → 播放被阻塞
BUFFER_FLUSH → 缓冲清空

6. 进阶使用

① 自定义缓冲和缓存策略

var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    url: 'https://example.com/live/stream.flv',
    isLive: true,
    cors: true,
    withCredentials: false,
    // 缓冲大小和策略
    // lazyLoad: false,
    // lazyLoadMaxDuration: 3*60,
    // enableStashBuffer: true
});

② 销毁播放器

flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();

7. Vue / React 中使用示例

React

import React, { useEffect, useRef } from 'react';
import flvjs from 'flv.js';

export default function FlvPlayer({ url }) {
    const videoRef = useRef(null);

    useEffect(() => {
        if (flvjs.isSupported()) {
            const player = flvjs.createPlayer({
                type: 'flv',
                url: url
            });
            player.attachMediaElement(videoRef.current);
            player.load();
            player.play();

            return () => {
                player.destroy();
            };
        }
    }, [url]);

    return &lt;video ref={videoRef} controls width="640" height="360">&lt;/video>;
}

8. 注意事项

浏览器支持：
- 仅支持 MSE 的浏览器（Chrome、Firefox、Edge 等）
- Safari 对 MSE 的支持不完善，需要 HLS 或其他方式
跨域问题：
- FLV 源必须支持 CORS，否则浏览器会报错
- Access-Control-Allow-Origin: * 或你的域名
HTTPS 与 HTTP-FLV 混用：
- 页面 HTTPS → FLV URL 也必须 HTTPS，否则会被浏览器阻止
性能优化：
- 直播流可开启 isLive 和 enableStashBuffer
- 小窗口播放可降低分辨率或帧率