Vue.js中浏览器不支持自动播放时如何将背景视频替换为图片

核心逻辑是通过 <video> 元素play()方法返回的 Promise 状态判断自动播放权限：如果play()执行成功resolve，说明浏览器允许自动播放；如果抛出错误reject，说明自动播放被拦截，此时切换为降级背景图即可。该方案比UA检测更准确，能覆盖所有浏览器策略、用户自定义设置的场景。

第一步：修改模板代码 #

给视频元素添加ref和显示控制，同时新增降级背景图容器：

<template>
  <div class="background-container">
    <!-- 背景视频：仅自动播放支持时显示 -->
    <video
      v-if="isAutoPlaySupported"
      ref="backgroundVideo"
      autoplay
      loop
      muted
      playsinline
      class="background-video"
    >
      <source src="@/assets/video/background.mp4" type="video/mp4">
    </video>
    <!-- 降级背景图：自动播放被拦截时显示 -->
    <div
      v-else
      class="background-image"
      :style="{ backgroundImage: `url(${require('@/assets/images/background-fallback.jpg')})` }"
    ></div>
  </div>
</template>

注意：playsinline是移动端 Safari、多数安卓浏览器允许静音视频自动播放的必填属性，缺失会导致即使本身支持自动播放也被拦截。

第二步：添加自动播放检测逻辑 #

在mounted生命周期中执行检测，兼容新旧浏览器：

<script>
export default {
  data() {
    return {
      // 初始默认设为false，避免不支持场景下视频元素短暂闪现
      isAutoPlaySupported: false
    }
  },
  async mounted() {
    const videoElement = this.$refs.backgroundVideo
    // 兜底处理：元素不存在直接走降级
    if (!videoElement) return

    try {
      // 手动触发播放，检测权限
      const playResult = videoElement.play()
      // 兼容不返回Promise的旧版本浏览器
      if (playResult !== undefined) {
        await playResult
        // 播放成功，标记为支持自动播放
        this.isAutoPlaySupported = true
      } else {
        this.isAutoPlaySupported = true
      }
    } catch (error) {
      // 播放被拦截，标记为不支持，走降级逻辑
      this.isAutoPlaySupported = false
    }
  }
}
</script>

第三步：添加统一样式 #

保证视频和背景图展示效果一致，铺满容器：

<style scoped>
.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}
.background-video, .background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-position: center;
  background-size: cover;
}
</style>

适配Vue3的小调整 #

如果使用Vue3组合式API，只需要把ref的获取方式改为const backgroundVideo = ref(null)即可，检测逻辑完全一致。

内容的提问来源于stack exchange，提问作者ClientCrash