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

墨尊2025-06-12 9:23

起因是我想在网页中展示流媒体服务器中的视频流。后来了解到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>