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.
You must log in or # to comment.
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/
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 withlibsvtav1)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.
avc1 is the name for H.264 (also called AVC) which is admittedly pretty confusing
