关于video不能自动播放的问题解决

你的南瓜呀

已于 2023-10-21 16:14:47 修改

阅读量1.4k

点赞数 1

分类专栏：项目问题记录文章标签： html5 web

于 2023-10-11 21:19:05 首次发布

本文链接：https://blog.csdn.net/weixin_47159518/article/details/133778554

版权

项目问题记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在大部分移动设备，部分浏览器，视频都是禁止自动播放的。举个例子，在微信H5中，视频无法自动播放是由于微信的策略限制所致。

模拟事件

我知道你很急，但是先别急。咱们先试试模拟事件

事件就是为了表示网页中某个有意义的时刻。在web浏览器中，事件可以分为两种类型：用户代理生成的事件和脚本生成的事件。其中，脚本生成的事件就是模拟事件。DOM3规范指明了模拟特定类型事件的方式。

直接上代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      .box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!-- <div ontouchstart="console.log('1==')">我是南瓜</div> -->
      <video id="myVideo" autoplay width="100%" height="100%">
        <source
          src="你的视频资源地址"
          type="video/mp4"
        />
      </video>
    </div>
    <script>
      const videoRef = document.querySelector("#myVideo");
      // 创建一个event对象
      const event = document.createEvent("MouseEvents");
      // 初始化event对象
      event.initMouseEvent("click", true, true, document.defaultView, 0);
      videoRef.addEventListener("click", (e) => {
        console.log("test====", e);
        videoRef.play();
      });
      // 触发事件
      videoRef.dispatchEvent(event);
    </script>
  </body>
</html>

运行这段代码发现，视频依然不能自动播放。如果我手动点击视频，就能正常播放。但是从后台打印来看，两种不同类型的事件都被监听到了，为何运行结果不一样呢？

我的猜想：一定是这两种事件的事件对象的某个属性不一样，浏览器通过判断这个属性值来决定是否执行播放视频这个操作。

于是，我仔细对比了两种事件的事件对象。果然，用户代理生成的真实事件中，isTrusted属性值为true，而且模拟事件中这一属性为false。

chatgpt对这一属性的解释：

替代方案

实际上，由于微信的限制，真正实现视频自动播放是比较困难，我暂时没有找到真正意义上视频自动播放的解决方案，以下提供一些可能的替代方案：

第一种：用户触发播放：在页面上添加一个明显的播放按钮，引导用户主动点击，或者用户滑动，点击其他元素的时候触发视频播放。这种方法还是要求先有用户操作，如果你的项目需要完全脱离用户操作的自动播放，请参考下面两种方案。

第二种：通过切换图片模拟视频播放，通过连续修改图片src，视觉上给用户一种播放视频的错觉

滴滴官网视频自动播放录屏

第三种：使用apng，gif等动图替代视频

方案存在缺陷：

1. 无法实现有声视频的自动播放

2. 视频较长时，第二种方式需要提供很多图片，第三种apng就会变得很大

其他方案，欢迎小伙伴评论区指教～

你的南瓜呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
关于video不能自动播放的问题解决

第一种：用户触发播放：在页面上添加一个明显的播放按钮，引导用户主动点击，或者用户滑动，点击其他元素的时候触发视频播放。这种方法还是要求先有用户操作，如果你的项目需要完全脱离用户操作的自动播放，请参考下面两种方案。当用户手动点击元素时，浏览器会触发真实的鼠标点击事件，并将事件流信息（如鼠标位置等）传递给事件处理程序。方法来模拟点击时，事件是通过代码触发的，并没有真实的鼠标点击发生，也无法传递事件流信息。第二种：通过切换图片模拟视频播放，通过连续修改图片src，视觉上给用户一种播放视频的错觉。
复制链接

扫一扫