Replace background video with image if autoplay is not supported in vue js-CodePudding

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>

CodePudding user response：

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>

source

Example with no video

CodePudding user response：

Add the playsinline attribute for your video to autoplay on iOS.

(Most browsers support autoplay, as long as you also use muted.)