I have a website with a background video. Many browsers especially mobile ones dont support autoplay even with muted videos. How can i detect if the browser isnt supporting autoplay and replace the video with an image. Im using vueJS.
<video autoplay class="background-video" loop muted> <source src="@/assets/video/background.mp4" type="video/mp4"> </video>
Use the poster attribute:
<video width="620" loop muted poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" >
<source
src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
type="video/mp4">
<source
src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
type="video/ogg">
<source
src="https://archive.org/download/ElephantsDream/ed_hd.avi"
type="video/avi">
</video>
Add the playsinline attribute for your video to autoplay on iOS.
(Most browsers support autoplay, as long as you also use muted.)