this post was submitted on 18 Nov 2024
11 points (100.0% liked)

Web Development

3453 readers
1 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Related Communities

Wormhole

Some webdev blogsNot sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

CreditsIcon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 2 years ago
MODERATORS
snowe@programming.dev
erlingur@programming.dev
Ategon@programming.dev
11
How use AV1 video with Firefox ?? (lemmy.ml)
submitted 1 month ago by Donatello@lemmy.ml to c/webdev@programming.dev
4 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.

top 4 comments
sorted by: hot top controversial new old
[โ€“] BananaTrifleViolin@lemmy.world 2 points 1 month ago* (last edited 1 month ago) (1 children)

Your html looks wrong to me in your second example.

The type should be closed with " not continued with ; Codecs should also use" "

I don't think the Codecs bit is needed though. Having the Type correct should be enough.

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

Edit: Also presumably your files are definitely AV1? Double check that. I think you can also drag and drop video into Firefox to see if they will play.

Edit2: Also on searching I've seen someone say you may need to use the video tag itself for mkv:

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

It's one of the solutions lower down on this stack post, but you'd need to test that. https://stackoverflow.com/questions/21192713/how-to-playback-mkv-video-in-web-browser

As a side, it's very frustrating to see how many people wrote code on that page that just works on Chrome. So much for Web standards!

[โ€“] Donatello@lemmy.ml 1 points 1 month ago* (last edited 1 month ago)

Thank you BananaTrifleViolin,

I've tried all your solutions, none works.

Yes they are AV1 (I have encoded them)

Codec: AOMedia's AV1 Video (av01)
Color primaries: ITU-R BT.709
(audio): Codec: MPEG AAC Audio (mp4a)\



\

... So much for Web standards! ...

Couldn't agree more

I think you can also drag and drop video into Firefox to see if they will play.

no, this initiated a download :/

[โ€“] Donatello@lemmy.ml 1 points 1 month ago* (last edited 1 month ago) (1 children)

Funny 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...

[โ€“] Donatello@lemmy.ml 1 points 1 month ago

MP4 container part, solved --> https://lemmy.ml/post/22627660