如果vue js不支持自动播放，请将背景视频替换为图像

Question

我有一个带有背景视频的网站。许多浏览器，尤其是移动浏览器，即使是静音视频也不支持自动播放。我如何检测浏览器是否不支持自动播放并用图像替换视频。我正在使用 vueJS。
<video autoplay class="background-video" loop muted> <source src="@/assets/video/background.mp4" type="video/mp4"> </video>

Answer 1

使用poster属性：

<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

Answer 2

为您的视频添加 playsinline 属性以在 iOS 上自动播放。

（大多数浏览器都支持自动播放，只要你也使用静音即可。）

如果vue js不支持自动播放，请将背景视频替换为图像

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

html

javascript

video

image

vue.js