this post was submitted on 18 Nov 2024
16 points (94.4% liked)

Firefox

18040 readers
365 users here now

A place to discuss the news and latest developments on the open-source browser Firefox

founded 5 years ago
MODERATORS
[email protected]
16
How use av1 video with Firefox ?? [~solved] (lemmy.ml)
submitted 1 month ago* (last edited 1 month ago) by [email protected] to c/[email protected]
11 comments fedilink hide all child comments
 

cross-posted from: https://lemmy.ml/post/22627659

Hi,

I have a couples of AV1 videos that I would like to display on a html page.

I've tried

<video controls preload="none">
    <source src="FooBar.mp4">
</video>

but it trow back

I've tried first with MKV container as it's listed on the wikipedia page.

but this is not listed on the mozilla page https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Video_codecs πŸ€”

Confusing.. as I found also this in the firefox release note:

Firefox 97 and later versions support AV1 video in the MKV container.

So WTF !?

I've tried also

<video controls preload="none">
    <source src="FooBar.mp4" type="video/webm; codecs='av01.0.08M.08'">
</video>

but that change nothing...

Any ideas ?

Thanks.

all 12 comments
sorted by: hot top controversial new old
[–] [email protected] 4 points 1 month ago* (last edited 1 month ago) (2 children)

seems like the codecs='something' is REALLY nitpicky. managed to get a test video to play with:

<video> 
    <source src="test.mp4" type='video/mp4; codecs="avc1.4d401f"'>
</video>

I made the video by encoding some random clip with ffmpeg -i random_video.mp4 -c:v libaom-av1 -crf 30 test.mp4 (seems to work just as well with libsvtav1)

As for how are you supposed to know the "4d401f"? beats me, found it here: https://caraya.github.io/av1-video-demo/

edit: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter#av1 does say that the codec string should look a bit different, but... I dunno, not a video-understanding-webmonke.

edit2: and now I realize that since it works with the codecs=avc1 - it's the older av1 variant? Not really what you were asking. Whoopsiedaisy.

[–] [email protected] 1 points 1 month ago (1 children)

Thanks @[email protected] ,

by any change I've tried codecs="avc1.4d401f" with my videos but of course it's not working.

Whats drive me crazy, is when open trough file:/// Firefox can play it, but once inside an html page, you have to specify the right codec !? WTF

[–] [email protected] 1 points 1 month ago (1 children)

and you're absolutely sure the files are av1? if you try to open the video files with ffmpeg, eg: ffmpeg -i videofile.mkv, what does it say the codec is?

at least my av1 videos say: Stream #0:0[0x1](und): Video: av1 (libdav1d) (Main) (av01 / 0x31307661), yuv420p(tv, progressive), 854x854, 464 kb/s, SAR 1:1 DAR 1:1, 30 fps, 30 tbr, 16k tbn (default)

[–] [email protected] 1 points 1 month ago

ffmpeg -i FooBar.mkv

Stream #0:0: Video: av1 (libdav1d) (Main), yuv420p(tv, bt709, progressive).....

[–] [email protected] 1 points 1 week ago

avc1 is the name for H.264 (also called AVC) which is admittedly pretty confusing

[–] [email protected] 4 points 1 month ago

OK, I made work the mp4 container

So in all my trial , I have introduce en error in the video path /path/path/FooBar.mp4 as those test where taking place under Windows this time, the front / was making the file unreachable, "funny" in the console no error about that, but about codec that is not found..... O_o

MP4

it worked with

...
<source src="path/FooBar.mp4" type="video/mp4">
...
<!-- so without specifying the codec, at least -->
MKV

I've tried everything so far, I didn't managed to make it work :/ so it seem that finally Firefox do not support MKV with AV1

[–] [email protected] 3 points 1 month ago* (last edited 1 month ago) (1 children)

Your second example has wrong type for that file should be video/mp4.

https://tekeye.uk/html/html5-video-test-page

[–] [email protected] 1 points 1 month ago* (last edited 1 month ago) (2 children)

Thank you @[email protected] no matter the type I enter, it's still not working...

btw the videos on your link are encoded H264 with , not AV1

Codec: H264 - MPEG-4 AVC (part 10) (avc1)

[–] [email protected] 1 points 1 month ago* (last edited 1 month ago)

I know, I've linked that to show the correct mimetype.

Is your web server returning the correct mimetype for the FooBar.mp4 file ? Also codecs part should probably look more like this: type='video/mp4; codecs="av1, ogg"' (omit the ogg in your case)

E: if you are opening the html with the element as a file:// in firefox, you probably wont be able to load resources from http:// (only https:// it seems), and it will show the same error in this case but it's because of security not because it can't decode the media. You can see the detailed error (for loading the file) in developer tools ctrl+shift+i and switch to network tab.

[–] [email protected] 1 points 1 month ago

btw:

when I open .mp4 container version of it, by file path (url bar) like file:///X:/path/FooBar.mp4 it works, so Firefox can Open it… (now still to make it work inside an html page )

for .mkv it trigger a file download…

[–] [email protected] 1 points 1 week ago

MP4box has a great local web tool to test the mime type including the codecs parameter:

https://gpac.github.io/mp4box.js/test/filereader.html

Jake Archibald wrote a good article about this topic: https://jakearchibald.com/2022/html-codecs-parameter-for-av1/