桂林北站附近住宿,杭州学网站建设,手机微网站注册登录源码,建高铁站赚钱吗一、需求#xff1a;
使用h5开发的网站#xff0c;首页的banner是一个video视频#xff0c;在PC端上和手机浏览器上都能正常播放#xff0c;但是在手机微信浏览器里面视频是无法自动播放的。
二、实现效果#xff1a;
1.微信浏览器的效果#xff1a;
2.正常效果
使用h5开发的网站首页的banner是一个video视频在PC端上和手机浏览器上都能正常播放但是在手机微信浏览器里面视频是无法自动播放的。
二、实现效果
1.微信浏览器的效果
2.正常效果 三、代码实现 靠谱的方式是用户必须要点击视频才能触发 video idmyVideo muted autoplayautoplay loop stylewidth: 100%;source src{$banner[video]|default} typevideo/mp4
/videoscript//一般情况下这样就可以自动播放了但是一些奇葩iPhone机不可以document.getElementById(myVideo).play();//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效document.addEventListener(WeixinJSBridgeReady, function () {document.getElementById(myVideo).play();}, false);//监听用户点击视频点击视频后即可播放视频var video document.getElementById(myVideo); // 获取视频元素function handleClick(event) {console.log(用户点击了视频);video.play();}video.addEventListener(click, handleClick); // 添加点击事件监听器//监听用户点击屏幕点击屏幕后即可播放视频//document.addEventListener(touchstart, function(){ //var video document.getElementById(myVideo);//video.play();//}, false);/script完成~
