My search for the most optimal method to automatically play a video in the background led me to discover some interesting findings based on the latest data available.
- VVC/x266 - Versatile Video Coding: Offers significant reduction in data requirements without sacrificing visual quality, although not supported by any current browsers
- AV1 - AOMedia Video 1: An efficient codec that is 30% more effective than H.265, but lacks support from most browsers
- HEVC/x265 - High Efficiency Video Coding: Outperforms VP9 in terms of bit-rate savings, yet also lacks widespread browser support
- VP9 - Widely supported by most browsers when used with webm format
At present, I have an av1 file within an mp4 container located here
Unfortunately, autoplaying this video is not supported on Safari for MacBook, iPhone & iPad devices or Firefox on Android.
Upon further research regarding AV1 browser support, HEVC browser support, and compatibility with VP9 (supported by all browsers), I gained a better understanding of the situation.
I am using svelte in this scenario
<script lang="ts">
import { MetaTags } from 'svelte-meta-tags';
import Viewport from 'svelte-viewport-info'
import vi from './assets/videofile.mp4'
import posterimg from './assets/PosterImage.png'
</script>
<main>
<video
autoplay
muted
loop
Playsinline
src={vi}
poster={posterimg}>
</video>
</main>
<style>
video
{
width: 100%;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
}
</style>
Although I have set the video to autoplay, it does not function as intended on Safari and Firefox browsers
I have a few queries:
- Is there a way to determine if the
autoplayfeature in the svelte script fails to trigger video playback across different browsers?- Is there a method to identify if video autoplay failures are due to the device being in
low power modeon Apple devices?