Chrome 视频标签无法播放碎片化的 mp4 流答案

【问题标题】：Chrome video tag can't play fragmented mp4 streamChrome 视频标签无法播放碎片化的 mp4 流
【发布时间】：2021-02-16 01:55:52
【问题描述】：

我们使用<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 最近出现了中断change。所以我们禁用chrome://flags/#reduced-referrer-granularity。但问题仍然存在。

我们如何让<video> 再次在 Chrome（新 Edge）中播放碎片化的 mp4？

【问题讨论】：

您是否在控制台中看到任何警告或错误消息？如果您尝试在本地播放而不是跨域播放，视频会播放吗？如果可能的话，请尝试分享示例 fmp4 编解码器 H.264 视频。另外，让我们知道您的流式传输代码。我们可以尝试对其进行测试以检查问题。
没有警告或错误信息。 VLC 和 Firefox 可以播放流。似乎跨域不是根本原因，因为我禁用了减少的推荐人粒度。我要录制直播，尽量分享给大家。
很难将流分享到互联网。但是，我可以在这里分享回购步骤。 1. 从'github.com/xia-chu/ZLMediaKit'下载zlmediakit。我们可以直接运行 zlmediakit docker，而不是从源代码构建。 2.推流，使用'ffmpeg -f dshow -i video="Integrated Webcam" -vcodec libx264 -f rtsp -rtsp_transport tcp rtsp://127.0.0.1/live/test'。 3. 编写一个简单的页面，其中包含<video src='http://127.0.0.1/live/test.live.mp4'></video>。在 Chrome/Edge/Safari 中打开它。
我们在互联网上建立一个测试流。 http://cam.jujiucloud.com/live/test.live.mp4。请看一看。

标签： google-chrome html5-video microsoft-edge chromium

【解决方案1】：

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

我使用 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 浏览器中播放流。

【讨论】：

Chromium 几个月前支持它。最近发生了什么？
我们之所以坚持使用Microsoft New Edge，是因为它是全宇宙唯一可以播放HEVC(H.265)视频的浏览器。我们尝试成功了，我们认为我们已经取得了突破。但现在，它甚至无法播放 H.264 视频。
顺便问一下，chromium 支持哪些编解码器来支持“video/mp4”？
你可以参考这个document来检查Chromium平台支持的编解码器。您也可以尝试参考此thread 可能有助于获取有关此问题的更多信息。
已修复。该视频可以在 Chrome Canary 上很好地播放。希望它可以尽快集成到 Chromium Edge 中。