当前位置：首页 > news >正文

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

news 来源：原创 2025/6/14 9:44:54

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

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

技术优势

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

实现代码

<!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>