引入外部CSS文件后HTML5 video视频无法正常播放问题排查

问题原因 #

引入site.css后视频仅显示灰色方框、移除样式表后功能恢复，核心原因是site.css中的样式规则和<video>元素的渲染逻辑存在冲突，和你写的随机视频加载逻辑无关。

修复方案 #

• 优先排查site.css中的冲突规则，重点检查以下规则是否存在：
  • 针对video、article、section、main标签的全局样式，是否设置了visibility: hidden、opacity: 0、z-index < 0这类会让视频不可见的属性
  • 是否给video设置了灰色背景，同时通过overflow: hidden、错误的object-fit属性遮挡了视频画面
  • 是否写了video::before/video::after伪元素覆盖了视频播放区域
• 快速验证冲突：给<video>标签加上高优先级内联样式强制覆盖外部CSS，修改后的标签代码如下：

<video height="800px" controls style="display:block !important; visibility:visible !important; opacity:1 !important; z-index:999 !important; position:relative !important; background:#000 !important;">
    <source id="vsrc" />
</video>

如果修改后视频恢复播放，即可确认是CSS规则冲突，接下来只需要逐项删除site.css中的冗余规则找到冲突项即可。

• 补充优化：部分浏览器不会自动识别<source>标签的src变动，动态赋值后需要手动触发视频加载，修改你的脚本代码如下：

document.getElementById("vsrc").src = "./Folder/" + Math.floor((Math.random()*266)+ 1) + ".mp4";
document.getElementById("vsrc").parentElement.load();

内容的提问来源于stack exchange，提问作者Kamal Ələsgərli