如何在Firefox中隐藏“No video with supported format and MIME type found”提示

这个问题我之前做项目时也踩过坑，Firefox对初始src为空的<video>元素确实会默认弹出那条烦人的错误提示，分享几个亲测有效的解决办法：

方法一：用CSS直接隐藏错误提示 #

Firefox专门提供了伪元素来控制视频错误提示的显示，直接用CSS隐藏即可：

/* 仅针对Firefox生效 */
video::-moz-media-error {
  display: none;
}

这种方式最简单直接，不需要修改HTML结构或JS逻辑，其他浏览器也不会受到影响，因为这个伪元素是Firefox专属的。

方法二：初始设置透明占位视频 #

提前准备一个1x1像素的透明视频（可以用base64编码直接嵌入），把它作为初始src，后续再用JS替换成真实视频地址：

<video src="data:video/webm;base64,GkXfo0AgQoaBAUL3gQFC8oEEQvOBCEKCQAR3ZWJtQoeBAkKFgQIYU4BnQI0VSalmQCgq17FAAw9CQE2AQAZ3aGFtbXlXQUAGd2hhbW15RIlACECPQAAAAAAAFlSua0AxrkAu14EBY8WBAZyBACK1nEADdW5khkAFVl9WUDglhoKAA1ZQOIOBAeBABrCBCLqBCB9DAtnIEAAVFYUisgAAAAAABhbnJlbmNlEERhdGEgMAAAAAAAAAC2FyY2hhbmdlEERhdGEgMAAAAAAAAAN1bmFtZUVkaXRvciBTdWJtaXQAAAAAAAAPZGVtb2FkZHJlc3MQAAAAAAAAD21pbWVzY2FsZURhdGEgMAAAAAAAAABtb3JlZGF0YSAwAAAAAAAAAA9tYXhpbXVtRGF0YSAwAAAAAAAAAAZtYXhpbXVtRGF0YSAwAAAAAAAAAA==" controls></video>

这个占位视频完全透明，用户看不到任何内容，后续替换src时也不会触发错误提示。

方法三：动态创建视频元素 #

干脆不在HTML里提前写空src的视频标签，等需要加载视频时，用JS动态创建并插入到DOM中：

// 比如在某个按钮点击或数据加载完成后执行
function loadVideo(videoUrl) {
  const videoEl = document.createElement('video');
  videoEl.controls = true;
  videoEl.src = videoUrl;
  // 把视频插入到目标容器里
  document.getElementById('video-container').appendChild(videoEl);
}

这种方式从根源上避免了空src的状态，自然不会出现错误提示，代码逻辑也更清爽。

如果只是临时隐藏提示，方法一最省心；如果追求更严谨的初始化逻辑，方法三会更合适。

内容的提问来源于stack exchange，提问作者Linh Nguyễn Duy