通过flv.js在网页中拉流进行视频播放

起因是我想在网页中展示流媒体服务器中的视频流。后来了解到flv.js,故作如下知识记录:

FLV (Flash Video) 格式最初是为 Adobe Flash Player 设计的视频容器格式,但随着 HTML5 技术的发展,直接在网页中播放 FLV 文件变得越来越困难。HTTP-FLV 技术通过将 FLV 文件通过 HTTP 协议传输,并在前端使用 JavaScript 解码播放,实现了在不依赖 Flash 的情况下播放 FLV 视频流。

技术优势

  • 兼容性强:支持主流浏览器 (Chrome、Firefox、Safari 等)
  • 低延迟:适合直播场景,延迟通常在 1-3 秒
  • 广泛应用:很多现有的视频平台和直播系统仍在使用 FLV 格式

实现代码

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTTP-FLV播放器</title>
    <script src="https://cdn.jsdelivr.net/npm/flv.js@1.6.2/dist/flv.min.js"></script>
</head>
<body>
    <h1>HTTP-FLV播放器</h1>
    <video id="videoElement" controls width="800"></video>
    <div>
        <button id="playButton">点击播放</button>
    </div>
    <p>状态: <span id="status">初始化...</span></p>

    <script>
        const video = document.getElementById('videoElement');
        const statusElement = document.getElementById('status');
        const playButton = document.getElementById('playButton');
        let flvPlayer = null;

        if (flvjs.isSupported()) {
            statusElement.textContent = '准备就绪,请点击播放按钮';
            
            playButton.addEventListener('click', () => {
                if (!flvPlayer) {
                    flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url: 'http://127.0.0.1:8080/live/stream.flv',
                        isLive: true
                    });
                    
                    flvPlayer.attachMediaElement(video);
                    flvPlayer.load();
                    
                    flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {
                        statusElement.textContent = '加载完成';
                    });
                    
                    flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
                        statusElement.textContent = `错误: ${errType} - ${errDetail}`;
                    });
                }
                
                video.play().catch(e => {
                    statusElement.textContent = `播放错误: ${e.message}`;
                });
                
                playButton.style.display = 'none';
            });
        } else {
            statusElement.textContent = '浏览器不支持FLV播放';
            playButton.style.display = 'none';
        }
    </script>
</body>
</html>
相关推荐
收破烂的小熊猫~7 分钟前
《Java修仙传:从凡胎到码帝》第四章:设计模式破万法
java·开发语言·设计模式
烛阴20 分钟前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
nananaij37 分钟前
【Python进阶篇 面向对象程序设计(3) 继承】
开发语言·python·神经网络·pycharm
初遇你时动了情37 分钟前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz41 分钟前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
阿蒙Amon1 小时前
为什么 12 版仍封神?《C# 高级编程》:从.NET 5 到实战架构,进阶者绕不开的必修课
开发语言·c#
无小道1 小时前
c++-引用(包括完美转发,移动构造,万能引用)
c语言·开发语言·汇编·c++
爱莉希雅&&&1 小时前
技术面试题,HR面试题
开发语言·学习·面试
开开心心_Every2 小时前
便捷的Office批量转PDF工具
开发语言·人工智能·r语言·pdf·c#·音视频·symfony
ohMyGod_1233 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js