海洋 CMS 播放页面空白只有音频没有画面

海洋CMS 播放页只有声音没有画面，绝大多数情况不是 CMS 本身出错，而是视频流的视频轨浏览器解不了，或者播放器的画面渲染层没加载成功。按「F12 看报错 → 换播放器 → ffprobe 验源」这三步走，10 分钟内基本能定位到根因。

为什么海洋 CMS 播放页会出现「有声无画」？

结论：只有音频没有画面，说明音频轨解码正常、视频轨解码失败或渲染层未挂载，问题出在「播放器文件」和「视频编码」两个环节之一。

浏览器内核（Chrome/Edge 的 Blink、Safari 的 WebKit）原生只稳定支持 H.264(AVC) + AAC 的 MP4，以及 H.264 的 HLS(m3u8)。一旦视频源是 H.265/HEVC、AV1、VP9 或 MPEG-4 Part 2，播放器就会走「音频能解、视频丢弃」的分支——表现就是进度条在走、声音正常、画面全黑或纯白。另一类是播放器脚本 404，整个 <video> 或 canvas 容器压根没被创建，同样只剩音频。

第一步：用 F12 区分是「播放器没加载」还是「视频没解码」

结论：打开播放页按 F12，切到 Network 面板，勾选「Fetch/XHR」和「JS」，刷新页面，把状态码按 404 排序。

• 如果看到 static/player/ 目录下的 .js 文件返回 404，就是播放器文件缺失或被误删，从同版本安装包重新上传覆盖即可，同时确认服务器伪静态没有拦截 .js。
• 如果所有资源都是 200，切到 Console 面板：出现 Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure... 说明站点是 HTTPS，而视频地址是 http://，浏览器会直接拦截视频轨。解决办法是把视频源换成 https:// 或加 CDN 证书。
• 出现 Uncaught (in promise) DOMException: The play() request was interrupted 之类的报错，多半是同页多个 JS 抢同一个播放器容器 ID，检查模板里是否重复引入了两次播放器代码。

第二步：用 ffprobe 确认视频编码是不是 H.265

结论：把播放页的 m3u8/mp4 地址复制出来，用 ffprobe 查编码，视频编码不是 h264 就必须转码。

ffprobe -v error -select_streams v:0 \
 -show_entries stream=codec_name,width,height,pix_fmt \
 -of default=nw=1 视频地址.mp4

如果输出 codec_name=hevc，就是 H.265。转成浏览器兼容格式的命令：

ffmpeg -i 原始.mp4 -c:v libx264 -profile:v high -level 4.1 \
 -pix_fmt yuv420p -c:a aac -b:a 128k -movflags +faststart 输出.mp4

关键参数说明：-profile:v high -level 4.1 保证 1080p 以内全平台兼容；-pix_fmt yuv420p 防止 Safari 黑屏（yuv444/yuv422 在 Safari 上就是有声音没画面）；-movflags +faststart 把 moov 原子前置，避免边下边播时视频轨来不及初始化。

第三步：切换播放器并检查播放器设置

结论：后台把播放器从 ckplayer 切到 DPlayer（或反向切换）能播，说明是播放器与编码格式的兼容问题，不是视频源问题。

操作路径是后台「系统」→「播放器设置」，逐个切换测试。老版 ckplayer 依赖 Flash，而 Chrome 从 2021 年起（Chrome 88 正式版）已彻底移除 Flash 支持，这条路在当前浏览器上必然黑屏，建议直接用 HTML5 播放器。切换后记得清空 CDN 和浏览器缓存，模板缓存路径通常在后台「系统」→「更新缓存」里一键清理。

需要注意的两个坑

第一，HLS 分片跨域：m3u8 里引用的 .ts 分片如果没有返回 Access-Control-Allow-Origin: *，Safari 能播、Chrome 黑屏。在 CDN 或 Nginx 里给 .ts、.m3u8 加上该响应头即可。

第二，模板被截断：部分采集来的资源标题里带单引号，直接输出到播放器的 JS 参数里会把代码截断，导致画面容器没渲染。检查模板中播放地址变量是否做了转义。

总结

海洋 CMS 播放页有声无画，先按 F12 把 404 和 Mixed Content 排掉，再用 ffprobe 确认视频编码是不是 HEVC 或 yuv444，是就转成 H.264 + yuv420p，最后在后台切换 HTML5 播放器并清理缓存。三步做完，绝大多数「只有声音没有画面」都能解决。