Skip to content

LoadQueue timeouts when tag-loading mp4 videos #275

Open
@alebianco-doxee

Description

@alebianco-doxee

TODO

  • Is this a question or bug? Stack Overflow is a much better place to ask any questions you may have.

  • Did you search the issues to see if someone else has already reported your issue? If yes, please add more details if you have any!

  • If you're using an older version, have you tried the latest?

  • If you're requesting a new feature; provide as many details as you can. Why do you want this feature? Do you have ideas for how this feature should be implemented? Pseudocode is always welcome!

Issue Details

  • Version used: 1.0

  • Describe whats happening (Include any relevant console errors, a Gist is preferred for longer errors):

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.

  • OS & Browser version (Please be specific) (Ex; Windows 10 Home, Chrome 62.0.3202.94):

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

  • Do you know of any workarounds?

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions