使用iframe、video、img标签无法加载Imgur的gifv文件

首先明确：.gifv本质是封装成MP4或WebM格式的视频文件，只是后缀名被设为.gifv，浏览器默认不会识别这个后缀对应的视频MIME类型，这是加载失败的核心原因。以下是几种直接可行的解决方法：

• 不指定type属性，让浏览器自动检测
  去掉video标签里的type="video/mp4"，让浏览器自行解析文件的实际编码格式，避免后缀名导致的MIME类型匹配错误。修改后的代码：

  <video controls class="gifv" id="gifv">
    <source src="${urlpostsb[0]}">
  </video>
  

• 动态替换URL后缀，强制匹配视频格式
  很多提供.gifv的API，其对应的MP4/WebM文件只需要替换后缀即可访问。可以用JavaScript动态修改视频源的URL，尝试切换为.mp4或.webm后缀：

  const video = document.getElementById('gifv');
  const originalSrc = video.querySelector('source').src;
  
  // 先尝试替换为mp4后缀
  const mp4Src = originalSrc.replace('.gifv', '.mp4');
  video.querySelector('source').src = mp4Src;
  
  // 监听加载失败事件，再尝试webm格式
  video.addEventListener('error', () => {
    const webmSrc = originalSrc.replace('.gifv', '.webm');
    video.querySelector('source').src = webmSrc;
    video.load();
  });
  

• 通过Blob对象强制指定MIME类型
  如果上述方法无效，可以通过Fetch API获取文件内容，再以Blob形式重新指定正确的视频MIME类型后加载：

  const video = document.getElementById('gifv');
  const src = video.querySelector('source').src;
  
  fetch(src)
    .then(res => res.blob())
    .then(blob => {
      // 创建新Blob并指定MP4类型，若无效可换为video/webm
      const videoBlob = new Blob([blob], { type: 'video/mp4' });
      video.querySelector('source').src = URL.createObjectURL(videoBlob);
      video.load();
    });
  

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