video/mp4;codecs=av01 source type

[tsi]

Description

Hi team,
I'm trying to play an extension-less AV1 source file, by explicitly passing a type, but for some reason the player returns CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED.
See this codepen - https://codepen.io/tsi/pen/zxOLboP?editors=1000
If I give it type="video/mp4" it will play fine but if it gets type="video/mp4;codecs=av01" or none it will say it's unsupported
Native

Context - I need it to accept video/mp4;codecs=av01 because that is what I'm getting back from a headers.get('content-type') call as suggested in #8475

Reduced test case

https://codepen.io/tsi/pen/zxOLboP?editors=1000

Steps to reproduce

1. Set-up a basic player.
2. Pass it a <source src="https://..." type="video/mp4;codecs=av01">

Errors

No compatible source was found for this media.

What version of Video.js are you using?

8.21.0

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Chrome

What OS(es) and version(s) does this occur with?

OSx 14.6

[mister-ben]

av01 isn't a spec-compliant codec string as it's missing mandatory parts, and Chrome says it can't play it in the video element. Video.js believes it, so doesn't try to load the source.

document.createElement('video').canPlayType('video/mp4;codecs=av01') returns ''. If you test with the full codec string (e.g. as returned by mp4box -info), av01.0.04M.10.0.112.09.16.09.0, or just the mandatory part (av01.0.04M.10), Chrome returns 'probably', so it would play.

Using the header is only useful if the server is returning a codec strings the browser expects. You could perhaps modify it and use a known-good AV1 codec string instead when you get this back.

[tsi]

Thanks @mister-ben for the great explanation.
I guess I can always split(';')[0] the string I get back from headers.get('content-type').