如何阻止WordPress站点中WEBM视频加载前的格式不支持提示

这不是WordPress站点使用WebM视频的正常现象，是浏览器在视频资源加载完成前，无法识别视频格式时抛出的临时提示。

以下是几种消除该提示的可行方法：

• 添加视频封面图：给<video>标签设置poster属性，指定一张和视频首帧一致的图片，加载前会显示封面替代黑框与提示。示例代码：

  <video poster="你的封面图片地址" autoplay loop muted>
    <source src="你的WebM视频地址" type="video/webm">
  </video>
  

• 优化预加载设置：给<video>标签添加preload="metadata"属性，让浏览器优先加载视频元数据，缩短格式识别的等待时间，降低提示出现的概率。
• 通过CSS+JS控制显示时机：先隐藏未加载完成的视频，加载完成后再显示。
  自定义CSS代码：

  video {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  video.loaded {
    visibility: visible;
    opacity: 1;
  }
  

  配合JavaScript监听加载事件：

  document.querySelector('video').addEventListener('loadeddata', function() {
    this.classList.add('loaded');
  });
  

• 配置服务器MIME类型：确认服务器已正确配置WebM对应的MIME类型video/webm，部分服务器默认未添加该配置，会导致浏览器初始阶段无法识别视频格式。可在站点根目录的.htaccess文件中添加：

  AddType video/webm .webm
  

内容的提问来源于stack exchange，提问作者DannyM