Detect browser and switch between AV1 & hvec codec to guarantee fast playback with new codecs accross borwsers?

[lrm]

This Reddit thread is basicly talking about what i would really love to see in laytheme:

https://www.reddit.com/r/AV1/comments/kw504b/auto_detect_browser_type_and_browser_video/

It would be awesome being able to upload alternative codec versions of the same video to make sure they play as fast as possible. H264 is just too large...

This page also gives a good overview of the support status:

https://caniuse.com/av1 - AV1 basicly supported everywhere but for mac only on M3 macs / iphone 15
https://caniuse.com/hevc - Supported on all macs, but not supported on borswers like firefox and also not planned

Hope you have a nice day!

[lrm]

Also just wanted to add: I already tested to upload .mp4 video with AV1 codec to laytheme and it wroks falwless, just the caveat with safari in this case.

[arminunruh]

maybe you could create a html element. +more → +html

and then use

<video autoplay muted playsinline loop>
    <source src="path-to-AV1.mp4" type="video/mp4; codecs=av01.0.05M.08">
    <source src="path-to-VP9.webm" type="video/webm; codecs=vp9">
    <source src="path-to-H264.mp4" type="video/mp4">
    This message is displayed when none are supported
</video>

as the guy in the reply suggests?

[lrm]

Thanks a lot Armin, i missed this post. So i can confirm it works...

Tested it here:

https://lrm.world/froggi-dancer/

For videos with sound it would be great to have the custom playbutton also. Also setting placeholder thumbnails is of course a nice thing to have. Doing all of this always manually is a bit tedious. Would be lovely to be able to use the standard upload dialogue from laytheme and adding the alternate codecs this way.

[lrm]

When i added the playbutton in manually i got weird layout shifts on click.... So yeah, would be osome to just use the standard html/video dialogue as there the checkboxes for player/ui/loop/mute are super handy.

[lrm]

Update on experiencing a strange issue:

While with this page the video is playning fine for me on Firefox and Safari, it doesn't on Chrome:
https://lrm.world/froggi-dancer/

Its weird because I'm using the same codecs (AV1 & HVEC in the same order) as in this page where the videos load fine on Chrome, Safari & Firefox:
https://lrm.world/circuit-choreography/

The only obvious difference is that on the Frog page the video has Sound, there isn't autoplay but play on click, and full width.

PS: When i access the uploaded video directly via Chrome it also plays, so theres something with the embed.

Video link: https://lrm.world/wp-content/uploads/2024/05/FroggiRhythmDancer_Comp_V008_16x9_AV1-92.mp4

Embed:

<div class="html5video  "><div class="ph" style="padding-bottom:56.25%;">
    <img class="html5video-customplayicon" src="https://lrm.world/wp-content/themes/lay/frontend/assets/img/play.svg" style="display:none">
        <video preload="auto" data-w="1920" data-h="1080" style="aspect-ratio:1920/1080;" data-ar="0.5625" playsinline="" loop="1" class="no-lazyload playpauseonclick loaded userinteractedwith-playing">
            <source src="https://lrm.world/wp-content/uploads/2024/05/FroggiRhythmDancer_Comp_V008_16x9_AV1-92.mp4" type="video/mp4; codecs=av01">
            <source src="https://lrm.world/wp-content/uploads/2024/05/FroggiRhythmDancer_Comp_V008_16x9_H265_High.mp4" type="video/mp4">
        </video>
    </div>
</div>

[arminunruh]

this video is hilarious!

can u make this video autoplay, muted and then use this setting where people can unmute the video using this sound icon/button maybe that works