关于 video 视频 autoplay 播放问题及解决方法

自动播放机制

自动播放机制其实就是会拦截自动播放的视频。

chrome、safari、firefox、edge 浏览器在某版本后都限制了video自动播放功能，原因为内部机制认为此视频为垃圾广告，和IOS系统一样，同时也是为客户体验度考虑，因此会限制自动播放功能。

解决办法

视频静音模式允许自动播放
以下几种模式下非静音也可以自动播放
- 客户已和当前做了交互方式：click tap 事件
- 客户将此网站添加到手机主桌面，就像App一样采用PWA技术
- 媒体参与度达到一定值后，同样可以自动播放

PWA

描述: PWA 又为（Progressive Web App，PWA），是一个使用web平台技术构建的应用程序，采用各种Web 技术将浏览器页面实现APP应用化，当然手机应用如支持PWA，可以无需下载通过PWA Web APP 添加到客户主屏幕上，快速访问全屏体验，目前PWA已支持不同操作系统和设备上运行。

特性:离线访问、推送消息、数据同步、实时更新。

手机无网络情况下，应用的启用动画特效等其实是使用离线访问实现。

媒体参与度

客户与媒体的交互度主要从客户的观看时间、交互行为、观看率、转换率来计算 - 浏览器内部算法。

错误代码示例

如只在video中加入autoplay 无任何错误提示画面停留在第一帧。

不使用 autoplay，在页面加载后调用 video play 方法
使用 autoplay，同时调用 video play 方法才会出现错误信息

以下代码运行会提示：play() failed because the user didn't interact with the document

原因：提示为未与客户做交互。

解决：可以加入弹框提示，客户交互点击播放 - JS处代码。

自定义 DIV 弹框、ElementPlus Dialog 均可，自行选择。

<template>
  <video controls autoplay>
    <source src="@/assets/audio/testVideo.mp4" type="video/mp4" />
  </video>
</template>

<script lang="ts" setup>

   import {
    ref,
    onMounted
  } from "vue";

  onMounted(() => {
    // 此处不加 play 控制台不会出现报错
    document.querySelector("video")!.play();
  })

</script>

<style scoped lang="less">

</style>

静音自动播放示例

在 video 标签上添加 muted 属性

<template>
  <video controls autoplay muted>
    <source src="@/assets/audio/testVideo.mp4" type="video/mp4" />
  </video>
</template>

<script lang="ts" setup>

   import {
    ref,
    onMounted
  } from "vue";

  onMounted(() => {
    document.querySelector("video")!.play();
  })

</script>

<style scoped lang="less">

</style>

客户交互播放示例

此处仅实现交互方式，样式自行编写。

<template>
  <button @click="play">开始播放</button>
  <video controls autoplay>
    <source src="@/assets/audio/testVideo.mp4" type="video/mp4" />
  </video>
</template>

<script lang="ts" setup>

   import {
    ref,
    onMounted
  } from "vue";

  const play = () => {
    let video : HTMLVideoElement = document.querySelector("video")!;
    // paused 播放状态
    if(video.paused){
        video.play();
    }
  }

</script>

<style scoped lang="less">

</style>

此帖查阅了相关资料，如若对PWA感兴趣此处可快速访问，如有问题请指出，欢迎讨论。