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

flv.js视频/直播流测试demo

news 2025/7/2 5:19:31

在当今这个视频为王的世界里，无论是做在线教育、安防监控还是娱乐直播，一个稳定、高效的网页播放器都是不可或缺的。Flash早已退出历史舞台，基于HTML5的视频播放方案成为了绝对的主流。其中，HTTP-FLV因其低延迟和良好的兼容性，在直播领域依然占据着重要地位。

今天，我想与大家分享如何使用强大的开源库 flv.js，一步步从零构建一个不仅功能完善，而且外观现代化、用户体验极佳的Web视频播放器。这个播放器最终将能够：

  1. 智能播放：无缝支持HTTP-FLV直播流和FLV点播视频。

  2. 界面美观：采用现代化的卡片式布局，拥有舒适的色彩和间距。

  3. 交互友好：提供清晰的操作指引，如动态的跳转提示和视频时长显示。

  4. 完全独立：不依赖任何前端框架，一个纯粹的HTML文件即可运行。

完整代码

整个项目的所有代码都在这一个HTML文件中，你可以直接保存并用浏览器打开它（需要将flv.min.js文件放在同级目录点击链接即可下载https://github.com/bilibili/flv.js/releases）。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>flv.js 现代化播放器</title><style>/* 1. 基础和全局样式 */:root {--primary-color: #007bff;--primary-hover-color: #0056b3;--light-gray: #f0f2f5;--border-color: #ddd;--text-color: #333;--text-light-color: #ffffff; /* 强制白色文字 */--text-muted-color: #6c757d; /* 用于描述性文字 */--card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Arial, sans-serif;background-color: var(--light-gray);color: var(--text-color);margin: 0;padding: 20px;display: flex;justify-content: center;align-items: center;min-height: 100vh;box-sizing: border-box;}/* 2. 播放器主容器（卡片） */.player-container {width: 100%;max-width: 800px;background-color: white;border-radius: 12px;box-shadow: var(--card-shadow);padding: 24px;box-sizing: border-box;display: flex;flex-direction: column;gap: 20px;}/* 3. 视频播放区域 */.video-wrapper video {width: 100%;height: auto;display: block;border-radius: 8px;background-color: #000;}/* 4. 输入和控制区域 */.input-section,.main-controls {display: flex;flex-wrap: wrap;align-items: center;gap: 12px;}/* ★ 5. 跳转控制区域重构 - 使用 fieldset 和 legend */.seek-controls {border: 1px solid var(--border-color);border-radius: 8px;padding: 16px;margin-top: 10px;}.seek-controls legend {font-weight: 600;padding: 0 8px; /* 让标题从边框中“破”出来 */color: var(--primary-color);}.seek-controls .description {font-size: 13px;color: var(--text-muted-color);margin: -5px 0 12px 0; /* 调整描述文字的间距 */}.seek-action-area {display: flex;align-items: center;gap: 12px;flex-wrap: wrap;}/* 6. 输入框样式 */.url-input,.seek-input {border: 1px solid var(--border-color);border-radius: 6px;padding: 10px 12px;font-size: 14px;transition: border-color 0.2s, box-shadow 0.2s;}.url-input {flex-grow: 1;}.url-input:focus,.seek-input:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);}/* 7. 按钮样式 */button {border: 1px solid var(--border-color);background-color: #fff;padding: 10px 16px;border-radius: 6px;cursor: pointer;font-size: 14px;font-weight: 500;transition: background-color 0.2s, color 0.2s, border-color 0.2s;}button:hover {border-color: #b3b3b3;background-color: #f8f9fa;}.btn-primary {background-color: var(--primary-color);color: var(--text-light-color);border-color: var(--primary-color);}.btn-primary:hover {background-color: var(--primary-hover-color);border-color: var(--primary-hover-color);}/* 8. 视频时长显示样式 */.duration-display {font-size: 14px;font-weight: 500;color: var(--text-color);}</style></head><body><div class="player-container"><div class="input-section"><inputid="urlInput"class="url-input"type="text"placeholder="请输入FLV视频地址..."/><button onclick="load_video()" class="btn-primary">加载/切换</button></div><div class="video-wrapper"><video id="videoElement" controls autoplay>您的浏览器版本太旧，不支持HTML5 video标签。</video></div><div class="main-controls"><button onclick="flv_start()">播放</button><button onclick="flv_pause()">暂停</button><button onclick="flv_destroy()">停止</button></div><fieldset class="seek-controls"><legend>视频跳转控制</legend><p class="description">想从特定时间点开始观看？在这里输入您想跳转到的秒数，即可快速定位。</p><div class="seek-action-area"><span id="durationDisplay" class="duration-display">总时长: --:--</span><inputid="seekpointInput"class="seek-input"style="width: 120px"type="text"placeholder="例如: 60"/><button onclick="flv_seekto()">跳转到该秒</button></div></fieldset></div><script src="flv.min.js"></script><script>// JavaScript 逻辑与上一版基本相同，仅调整了变量获取let flvPlayer = null;const videoElement = document.getElementById("videoElement");const durationDisplay = document.getElementById("durationDisplay");const seekpointInput = document.getElementById("seekpointInput");function formatTime(seconds) {if (isNaN(seconds) || !isFinite(seconds)) {return "--:--";}const minutes = Math.floor(seconds / 60);const remainingSeconds = Math.floor(seconds % 60);return `${String(minutes).padStart(2, "0")}:${String(remainingSeconds).padStart(2, "0")}`;}function load_video() {if (flvPlayer) {flv_destroy();}const url = document.getElementById("urlInput").value;if (!url) {alert("请输入视频地址！");return;}videoElement.addEventListener("loadedmetadata",function handleMetadata() {const totalDuration = videoElement.duration;durationDisplay.textContent = `总时长: ${formatTime(totalDuration)}`;if (isFinite(totalDuration)) {seekpointInput.placeholder = `0 - ${Math.floor(totalDuration)} 秒`;} else {seekpointInput.placeholder = "直播流无法跳转";durationDisplay.textContent = "实时直播流";}// 使用 { once: true } 的现代替代方案是手动移除监听器，以确保每次加载都刷新videoElement.removeEventListener("loadedmetadata", handleMetadata);});if (flvjs.isSupported()) {flvPlayer = flvjs.createPlayer({type: "flv",isLive: true, // 直播流必须设置为 trueurl: url,// --- 新增的优化配置 ---config: {enableWorker: true, // 开启独立的Web Worker进行解码，避免阻塞UIenableStashBuffer: true, // 开启IO隐藏缓冲区stashInitialSize: 128, // 缓冲大小，可以适当提高lazyLoad: false, // 关闭懒加载，尽快开始加载},});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();}}function flv_start() {videoElement.play();}function flv_pause() {videoElement.pause();}function flv_destroy() {if (flvPlayer) {flvPlayer.pause();flvPlayer.unload();flvPlayer.detachMediaElement();flvPlayer.destroy();flvPlayer = null;durationDisplay.textContent = "总时长: --:--";seekpointInput.placeholder = "输入秒数";}}function flv_seekto() {const seekValue = parseFloat(seekpointInput.value);if (!isNaN(seekValue) && isFinite(seekValue)) {if (isFinite(videoElement.duration) &&seekValue >= 0 &&seekValue <= videoElement.duration) {videoElement.currentTime = seekValue;} else if (!isFinite(videoElement.duration)) {alert("直播流不支持跳转！");} else {alert(`请输入 0 到 ${Math.floor(videoElement.duration)} 之间的有效秒数！`);}} else {alert("请输入有效的跳转秒数！");}}</script></body>
</html>

 

http://www.dtcms.com/a/263616.html

相关文章：

  • 2025 推理技术风向标：DeepSeek-R1 揭示大模型从 “记忆” 到 “思考” 的进化路径
  • 【linux】基础开发工具（1）
  • Flink Savepoints 总结
  • js代码09
  • Spring Boot WebSocket方案终极指南：Netty与官方Starter对比与实践
  • MFC的List Control自适应主界面大小
  • Android Gradle 插件和 Android Studio 兼容性
  • Windows下配置Docker+WSL集成开发环境
  • 【C#】如果有一个数值如 168.0000100，如何去除末尾的无效零，只显示有效的小数位数，让DeepSeek给我们解答
  • 飞算JavaAI—AI编程助手 | 编程领域的‘高科技指南针’，精准导航开发！
  • 小米YU7使用UWB技术，厘米级定位精准迎宾，安全防破解无感控车
  • CentOS系统新手指导手册
  • 微信小程序实现table表格
  • 【锂电池剩余寿命预测】GRU门控循环单元锂电池剩余寿命预测（Pytorch完整源码和数据）
  • 清理 Docker 缓存占用
  • 前端常用构建工具介绍及对比
  • 西交从语义到关系、重塑具身导航策略！RSRNav：基于空间关系推理的图像目标导航
  • android stdio 创建 mediaplayertest
  • SpringBoot+MySQL旅游资源管理系统Java源码
  • Reactor ConnectableFlux支持多订阅者
  • OpenCV CUDA模块设备层-----双曲正切函数tanh()
  • IDEA相关配置记录
  • 基于Python的GIS-RS多源数据处理(TIF/SHP/NC/...)【20250630】
  • 国产化替换中政务行业通用的解决方案是什么？需要注意的事项有哪些？
  • 03认证原理自定义认证添加认证验证码
  • Android阴影效果的艺术与实现：从入门到精通
  • GO 语言学习 之 Map
  • 38.docker启动python解释器，pycharm通过SSH服务直连
  • DBeaver 设置阿里云中央仓库地址的操作步骤
  • AlpineLinux安装docker