Android Chrome：未捕获（承诺）DOMException：加载失败，因为找不到支持的源答案

【问题标题】：Android Chrome : Uncaught (in promise) DOMException: Failed to load because no supported source was foundAndroid Chrome：未捕获（承诺）DOMException：加载失败，因为找不到支持的源
【发布时间】：2018-06-25 09:54:08
【问题描述】：

我正在开发一个使用 Javascript 连续播放多个 mp4 视频的 Web 应用程序。一切正常，但在使用 Chrome 的 Android 上。前三个视频播放正常，但从第四个视频开始，当我调用 video.play() 方法时，我在控制台中收到此错误：“未捕获（承诺）DOMException：加载失败，因为找不到支持的源。”

我确信所有视频源 (blob) 都是正确的，因为我可以将它们全部加载到另一个选项卡中。

我正在生成这样的视频元素：

generate_video_element = function(src) {
  var v = document.createElement('video');
  v.src = src
  v.type = "video/mp4";
  return v;
};

当我打电话时，我在 Android（仅限 Chrome）上收到此错误：

v.play();

它返回给我一个永远等待的承诺...... 提前感谢您的帮助。

【问题讨论】：

标签： javascript android html google-chrome video

【解决方案1】：

根据您提供的信息，该错误的最可能原因是您使用的 Android 设备不支持特定的 MP4 文件。

MP4 是视频和音频流的“容器”规范，容器中的视频和音频可能使用不同的编码，因此某些 mp4 文件可能受支持，而其他文件可能不支持给定设备或播放器。

这个答案给出了一个使用 ffprobe 之类的工具进行调试的示例，并特别查看 h.264 编码的“配置文件”（本质上是编码中可用的一组预定义选项），这通常是一个问题移动设备：https://stackoverflow.com/a/47478676/334402

【讨论】：

感谢您的帮助。我认为这不是问题，因为我所有的视频都采用相同的格式，前三个都可以正常工作。如果Android不支持该格式，它们都不会播放，对吧？

【解决方案2】：

Android 上的 Chrome 存在以下问题：

同时在多个视频上调用 video.load() 会导致一些负载挂起。

如果您随后检查 video.readyState 属性，您会发现以下内容：

正确加载的视频将值设置为 4 HAVE_ENOUGH_DATA
未正确加载的视频将其值设置为 1 HAVE_METADATA

我不确定在您的情况下究竟在哪里调用了 load 方法（源更改，或者在调用 play 时，或者它可能根本没有被调用），但您可能应该尝试视频一个接一个地加载，而不是并行加载。

我正在研究的下一个解决方案：

下载 blob
设置video.src并调用video.load()
等待video.oncanplaythrough 事件开始加载下一个

希望这应该可以在其他浏览器上运行时避免该问题。

【讨论】：