0

I was searching for the most efficient way autoplay a video in background.

Found these according to the latest information I was able to gather

  1. VVC/x266 - Versatile Video Coding: Can reduce data requirements by around 50% of the bit rate without compromising visual quality (Latest not supported by any browser)
  2. AV1 - AOMedia Video 1: AV1 codec is 30% more efficient than H.265 (Latest not supported by most browser)
  3. HEVC/x265 - High Efficiency Video Coding: x265 outperforms VP9 in bit-rate savings (Latest not supported by most browser)
  4. VP9 - Supported by most browser with webm format

I currently have a av1 inside mp4 container here

If you check this video on Safari on all devices MacBook, iPhone & iPad and Firefox on android doesn't autoplay is not supported.

On looking further AV1 browser support gave me a understanding, also HEVC browser support and VP9(supported by all browsers)

I using svelte here

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

Video autoplay doesn't play on Safari and Firefox

I have a couple of questions

  1. Is there a way to know if autoplay in the svelte script has failed to play the video on any browser?
  2. Is there a way to know if video autoplay failed due to low power mode on apple device?
Santhosh Dhaipule Chandrakanth
  • 1,134
  • 12
  • 26
  • Your problem seems more related to the fact browsers don't support your codecs rather than just an "autoplay" issue (which is the feature of starting the playback automatically without the user's intervention). So why not simply use `` elements with various formats and let the UA choose the one it can read. You can check if a particular file failed by listening to the `error` event fired on the `` elements or if all failed by listening to the ` – Kaiido Mar 23 '22 at 02:51

1 Answers1

0

If you have control over the video itself, I had a similar issue in the past that I solved by adding a keyframe at 1 second, then I listened for this keyframe with javascript before I considered the video playing.

The only reliable way I found to get around any platform/browser issues with media was keyframe events.

senecaTheMeek
  • 88
  • 7