Video.js: Blob Url Support broke with 7.2.1

[flipace]

Description

When using a dynamically generated blob url as a video source, any player interaction will be silenced by video.js

It works flawlessly when triggering .play() directly on the HTMLVideoElement though.

Reproduction case with comparison of 7.2.0 and 7.2.1: https://github.com/flipace/video.js-7.2.1-blob-issue. This is related to a change made in https://github.com/videojs/video.js/pull/5371

Steps to reproduce

1. Generate a blob url for a video
2. Pass the blob url as a src (with type) to videojs
3. Try triggering playback of the video

Results

Expected

Playback should start when clicking the play button(s).

Actual

Nothing happens.

Error output

No errors. video.js is stuck and will always wait for the video to be loaded into its internal source cache (which never happens though)

Additional Information

versions

videojs

7.2.1 and above are affected

browsers | OSes

since this is a videojs internal issue probably all of them

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

Just merged a fix, we should be making a release tomorrow.

[flipace]

awesome! thanks @gkatsev and @BrandonOCasey !

[andygale]

Thank you. I was waiting for this fix :)

[gkatsev]

It's out in 7.3.0, please try it out and report back if there are problems. If necessary, we can make a 7.2 patch but hopefully it won't be :)

[maxpaj]

Using [email protected], I just tried using a blob:// source URL, like this:

player.src("blob://...");

It doesn't work. HTML5 tech says it can't play it. However, if you specify a source object like this, with a type, it works:

player.src({ src: "blob://...", type: "video/webm" });

I suspect it's due to:

1. Sources supplied as strings are reconstructed as a source object with Util.filterSource, which tries to find the mime type using Util.getMimeType
2. Url.getFileExtension won't return anything since the blob URL ends with no file extension
3. Html5.nativeSourceHandler.canHandleSource determines whether it can play the source from the mime type

It's totally fine to supply the type for the source object, but with no good error being produced when you don't provide it, it can be quite confusing.

Suggestion: Perhaps add some check where it fits if the mimetype of the source cannot be determined.

[brandonocasey]

Interesting, you may want to open this as a new issue