关于 StreamPlay 流影

StreamPlay 流影是一款纯前端的在线播放器，用于播放 m3u8 / HLS 直播与点播地址， 同时兼容浏览器原生的 mp4 等格式。它不依赖任何后端服务，把整个目录丢到静态服务器上就能跑。

核心特性

• 零外部依赖：不加载任何第三方 CDN 资源，hls.js 已本地化，断网 / CDN 故障也能正常打开。
• 双引擎自动切换：m3u8 走 hls.js；mp4 等格式走浏览器原生播放；原生失败会自动降级到 hls.js 重试。
• 移动端适配：响应式布局，支持 iOS 行内播放（playsinline）。
• 深链播放：支持 ?url= 参数直接指定播放地址，便于 iframe 嵌入。
• 错误可见：加载中、网络异常、跨域受限、格式不支持等情况都会在页面上给出明确提示，不会静默失败。

技术栈

播放内核	hls.js 1.5.17（本地部署，用于 HLS 转封装）+ HTML5 <video>
样式	原生 CSS（CSS 变量 + Flex 布局），无 UI 框架
脚本	原生 JavaScript，无 jQuery、无构建步骤
后端	无，纯静态站点

目录结构

streamplay/
├── index.html          主页面
├── about.html          关于页
├── css/style.css       样式表
├── js/player.js        播放逻辑
├── libs/hls.min.js     HLS 播放内核（本地）
└── images/             图标资源

部署方式

• 直接部署：把整个目录上传到任意静态服务器的网站根目录，访问 index.html 即可。
• Nginx 示例：root /var/www/streamplay; 并确保 .m3u8、.ts 不被当作下载文件处理。
• 本地预览：在本目录执行 python -m http.server 8080，浏览器打开 http://localhost:8080。

常见问题排查

页面提示「跨域被拦截」	目标 m3u8 所在服务器未开启 CORS。浏览器出于安全策略会阻止跨域拉流，需要在流媒体服务器上配置 Access-Control-Allow-Origin。
一直停在加载中	检查地址是否可直接访问（用浏览器新标签页打开该 m3u8），以及网络是否能直连到该域名。
黑屏但无报错	多为编码格式不受支持。播放器要求视频为 H.264 编码，H.265/HEVC 在多数浏览器中无法播放。
浏览器自动播放被拦截	这是浏览器的自动播放策略，属正常行为，点击播放器上的播放按钮即可。

免责声明

本项目仅提供播放技术演示，不存储、不制作、不分发任何音视频内容。 请确保你拥有所播放内容的合法授权，因使用本项目产生的任何法律责任由使用者自行承担。