首页 > 解决方案 > Chrome 视频标签无法播放碎片化的 mp4 流

问题描述

我们<video>用来播放 fMP4 流(编解码器:H264 - MPEG-4 AVC (part 10) (avc1))。

<video muted autoplay playsinline>
  <source src='http://10.12.13.250:8080/5f6c457205c38e6a18ef991b/0e70e1cdee8b21af.live.mp4' />
</video>

页面的 url 是localhost:3000,所以我们试图跨源显示流。

几个月前它在 Chrome 中工作。但是现在(Chrome 86),它不能工作。什么都没有播放。Microsoft New Edge 中也出现了同样的问题,因为它使用了与 Chrome 相同的引擎。

然而,相同的代码在 Firefox (v82.0.2) 中有效。

我们注意到最近 Chrome 发生了重大变化。所以我们禁用chrome://flags/#reduced-referrer-granularity. 但问题仍然存在。

我们怎样才能<video>再次在 Chrome(新 Edge)中播放碎片化的 mp4?

标签: google-chromehtml5-videomicrosoft-edgechromium

解决方案


我尝试测试您在评论中分享的我这边的流。

我使用 Edge Chromium 浏览器和 Goole Chrome 浏览器得到了类似的结果,即没有播放流。但是,它正在使用 Firefox 浏览器。

我使用 VLC 播放器确认流的编解码器。

在此处输入图像描述

我尝试运行下面的代码并尝试检查此视频类型和编解码器是否可以与 chromium 浏览器一起使用。

function supportType(e,vidType,codType) { 
  var vid = document.createElement('video');
  isSupp = vid.canPlayType(vidType+';codecs="'+codType+'"');
  if (isSupp == "") {
    isSupp = "No";
  }
  e.target.parentNode.innerHTML = "Answer: " + isSupp;
} 
<p>Can my browser play MP4 videos? <span>
<button onclick="supportType(event,'video/mp4','H264 - MPEG-4 AVC (part 10) (avc1)')" type="button">Test</button>
</span></p>

在 Edge Chromium 浏览器和 Goole Chrome 浏览器中测试结果:

在此处输入图像描述

Chromium 平台似乎不支持此编解码器。我建议尝试为您的流媒体使用支持的编解码器可能会帮助您在 Chromium 浏览器中播放您的流媒体。


推荐阅读