+
80
-

微信打开h5页面中的video视频如何实现自动播放?

微信打开h5页面中的video视频如何实现自动播放?


网友回复

+
0
-

很简单,捕获touch事件来驱动视频播放,完整示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
<script>

//也可以在这个事件触发后播放一次然后暂停(这样以后视频会处于加载状态,为后面的流畅播放做准备)
document.addEventListener("WeixinJSBridgeReady", function (){ 
     let video = document.getElementById("video");      
    // 监听触摸事件
document.addEventListener(
  "touchstart",
  function () {
    // 检查视频是否正在播放
    if (video.paused) {
      // 如果视频未在播放中,则播放视频
      video.play();
    }
  },
  false
);
}, false)


    </script>

</head>
<body>
   <video id="video"   style="width:300px;" muted="true" x-webkit-airplay="allow" 
  x5-video-player-type="h5" 
  x5-video-player-fullscreen="true"
  x5-video-orientation="portraint" 
  style="object-fit:fill"  playsinline="true"  webkit-playsinline="true"  src="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" ></video>
</body>
</html>
		

我知道答案,我要回答