Html5 Video Tag Codecs Attribute

Html 5 video tag and codecs problem

Your <source> tag is malformed. You need to put the codec information inside the value of the type attribute instead, eg:

<source src="01.mkv" type='video/x-matroska; codecs="a_ac3, avc"'>

The type attribute contains a full MIME specification, and codecs is an optional parameter for some MIME types. There is no separate codecs attribute on the <video> tag.

AV1 codecs string for type attribute of source HTML5 video element

Here is the correct type according this article about using AV1:

<source type="video/webm; codecs=av01.0.05M.08">

How to determine the proper HTML5 video codec attribute for an AV1 file based on the FFMpeg encoding command or output?

av01.1.04M.08.0.000.02.02.02.02.0

Represents the following components: av01.P.LLT.DD.M.CCC.cp.tc.mc.F.

Component	Your video	Resulting Value
P	Format profile: High@L3.0	1
LLT	Format profile: High@L3.0, Main tier	04M
DD	Bit depth: 8 bits	08
M	Not monochrome (its not black & white)	0
CCC	Chroma subsampling: YUV 4:4:4	000
cp	unknown	02
tc	unknown	02
mc	unknown	02
F	Color range: Limited	0

What HTML5 video codecs should be used?

Ok, I got it working in every common browser, with a fallback for the olders ones. I used VLC to convert the files, and used the HTML below:

<video id="video_background" volume="0" muted="muted" loop="loop" autoplay="true" preload="auto">
<source type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" src="video/pr6.mp4"></source>
<source type="video/webm; codecs=vp8,vorbis" src="video/pr6.webm"></source>
<source type="video/ogg; codecs=theora,vorbis" src="video/pr6.ogv"></source>
<img alt="bg" src="img/bg1.jpg">
</video>

How can I get HTML5 video tag with multiple source tags with codec specification working on Firefox?

With trial and error I figured out that Firefox accepts the codec string if I not only specify avc1 but I also fully specify the profile and the level with a specific 6 digit hexadecimal code, for example:

type="video/mp4; codecs=avc1.64001E"

It's another question how someone can come across that hexadecimal code, for details look at How can I (or is it possible to) convert the AVC codec profile and level to the MIME codec definition? and https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter#AVC_profiles