通过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>
相关推荐
Fantastic_sj1 小时前
CSS-in-JS 动态主题切换与首屏渲染优化
前端·javascript·css
lly2024061 小时前
HTML 表单
开发语言
深海潜水员3 小时前
【Python】 切割图集的小脚本
开发语言·python
Yolo566Q4 小时前
R语言与作物模型(以DSSAT模型为例)融合应用高级实战技术
开发语言·经验分享·r语言
再学一点就睡4 小时前
手写 Promise 静态方法:从原理到实现
前端·javascript·面试
Felven4 小时前
C. Challenging Cliffs
c语言·开发语言
Dreamsi_zh5 小时前
Python爬虫02_Requests实战网页采集器
开发语言·爬虫·python
再学一点就睡5 小时前
前端必会:Promise 全解析,从原理到实战
前端·javascript·面试
_君落羽_6 小时前
C语言 —— 指针(4)
c语言·开发语言
weixin_448617056 小时前
疏老师-python训练营-Day30模块和库的导入
开发语言·python