CreateJS / PreloadJS

PreloadJS makes preloading assets & getting aggregate progress events easier in JavaScript. It uses XHR2 when available, and falls back to tag-based loading when not.
http://createjs.com/
MIT License
2.87k stars 763 forks source link

LoadQueue timeouts when tag-loading mp4 videos #275

Open alebianco-doxee opened 2 years ago

alebianco-doxee commented 2 years ago

TODO

Issue Details

When using a LoadQueue to tag-load (const queue = new createjs.LoadQueue(true);) mp4 videos on iOS, the queue goes in timeout because the video loading never completes.

This happens because the browser suspends the loading after the video metadata is received. The canplaythrough event is never dispatched and so the MediaTagRequest used by the VideoLoader never completes and timeouts after a while. On desktop this does not happen since Safari fully loads the file automatically.

Loading through XHR is not an option, because then Safari keeps "reloading" the blob resource while the media is playing and ends up consuming so much memory that slows down and then crashes the application. This is done by Safari as a sort of media streaming (https://blog.logrocket.com/streaming-video-in-safari/) but apparently with blob resources doesn't work very well ...

Basically, the preload = "auto" attribute of the video tag, behaves differently on desktop and mobile. On desktop it lets the browser fully load the file; On mobile it behaves as if it was set to metadata instead and requires manual intervention to fully load the file.

iPhone 13 iOS 15, both Safari anche Chrome also tested and confirmed in previous versions of hardware and software

Explicitly calling this._tag.load(); in the MediaTagRequest's load method, forces the browser to fully load the media file and dispatch the necessary events once the resource is ready.

danzen commented 11 months ago

Hi @alebianco-doxee - sorry for the delay. I forgot to keep track of preloadjs issues. We are maintaining here with the help of the community. Is there a chance that you could adjust preloadjs to solve the problem? Ideally then this would be done through a pull request and we can implement the request. Cheers.