通过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>
相关推荐
玩代码1 小时前
备忘录设计模式
java·开发语言·设计模式·备忘录设计模式
漠月瑾-西安2 小时前
如何在 React + TypeScript 中实现 JSON 格式化功能
javascript·jst实现json格式化
DogDaoDao2 小时前
视频HDR技术全解析:从原理到应用的深度探索
音视频·hdr·sdr·视频渲染·hdr10·视频hdr技术标准·人眼视觉系统
技术猿188702783512 小时前
实现“micro 关键字搜索全覆盖商品”并通过 API 接口提供实时数据(一个方法)
开发语言·网络·python·深度学习·测试工具
放飞自我的Coder2 小时前
【colab 使用uv创建一个新的python版本运行】
开发语言·python·uv
艾莉丝努力练剑2 小时前
【数据结构与算法】数据结构初阶:详解顺序表和链表(四)——单链表(下)
c语言·开发语言·数据结构·学习·算法·链表
止观止2 小时前
React响应式组件范式:从类组件到Hooks
javascript·react.js·ecmascript
@大迁世界2 小时前
React 及其生态新闻 — 2025年6月
前端·javascript·react.js·前端框架·ecmascript
zyhomepage2 小时前
科技的成就(六十九)
开发语言·网络·人工智能·科技·内容运营
珊瑚里的鱼2 小时前
第十三讲 | map和set的使用
开发语言·c++·笔记·visualstudio·visual studio