Android Chrome：未捕获（承诺）DOMException：由于找不到受支持的源而无法加载

Question

I am working on a web application in Javascript playing several mp4 videos in a row. Everything works fine but on Android using Chrome. The first three videos are playing fine but from the fourth when I call video.play() method I get this error in the console : "Uncaught (in promise) DOMException: Failed to load because no supported source was found."

I am sure that all the video sources (blob) are correct because I can load them all in another tab.

I am generating my video element like this :

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

I get this error on Android (Chrome only) when I call :

v.play();

It returns me a promise which is pending forever... Thanks in advance for your help.

Answer 1

The most likely cause of that error, given the information you provide, is that the particular MP4 file is not supported on the Android device you are using.

MP4 is a 'container' specification for video and audio steams and the videos and audios in the container may use different encodings, so some mp4 files may be supported and others may not on a given device or player.

This answer gives an example of debugging this using tools like ffprobe and looking in particular the the 'profile' (essentially a pre-defined set of options available within the encoding) of the h.264 encoding which is often an issue on mobile devices: https://stackoverflow.com/a/47478676/334402

Answer 2

There's the following issue on Chrome on Android:

Calling video.load() on multiple video's at the same time causes some of the loads to hang.

If you then inspect the video.readyState property, you will find the following:

• Properly loaded videos have the value set to 4 HAVE_ENOUGH_DATA
• Videos that didn't load properly have their value set to 1 HAVE_METADATA

I'm not sure where exactly the load method is being called in your case (source change, or when calling play , or maybe it's just not being called at all), but you should probably try to have videos be loaded one after another and not in parallel.

The next solution I'm investigating:

1. Download the blob
2. Set the video.src and call video.load()
3. Wait for the video.oncanplaythrough event to start loading the next one

Hopefully, this should avoid the issue while still working on other browsers.