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

你的南瓜呀

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

阅读量2k

点赞数 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。