微信浏览器中控制视频的播放

需求：官网的视频要在微信浏览器中播放，由于微信浏览器不支持自动播放，所以只能手动设置

<div class="globel_view" style="position:relative;"><video id="video_play" style="width: 100%; height:auto;" loop="" muted="" playsinline="" poster="/static/h5/mobile/image/video_preloader1.png?113"><source src="huoyun_etwod/page1.mp4" type="video/mp4"></video><span id="play_btn" style="position: absolute; top:50%; left: 50%; margin-top:-1.5rem; margin-left:-1.5rem; width:3rem; height:3rem;"><img src="/static/h5/mobile/image/play_btn.png" width="100%"></span>
</div>

 //视频在微信浏览器中手动播放var ua = navigator.userAgent.toLowerCase();var isWeixin = ua.indexOf('micromessenger') != -1;var myVideotop = document.getElementById("video_play");//这一步很关键，不能用jquery获取元素if (isWeixin) {$("#play_btn").click(function(){myVideotop.play()$("#play_btn").hide()})}else{$("#play_btn").hide()myVideotop.play()}

在微信浏览器中有播放按钮，其他浏览器自动播放
playsinline 属性//ios支持小窗播放 false 全屏播放
autoplay 属性//ios默认有播放按钮

微信浏览器中控制视频的播放相关推荐

微信浏览器中实现音乐自动播放
近日微信浏览器中h5页面实现音乐自动播放,试了好多方法,最后还是下面方法比较好用引入微信sdk <script src="http: //res.wx.qq.com/open/js/ ...
微信播放在服务器视频无法播放音乐,【bug解决】ios微信浏览器中背景音乐无法播放...
我记得之前在一次项目中,出现过浏览报错: 所以在这次H5的制作中,我使用了iframe来加载音频文件,使用这种方式后,电脑端是没有问题的,但是当上传至服务器上在手机上浏览时,会出现点击音乐旋转按钮无法 ...
H5页面在微信浏览器中自动播放视频
H5页面在微信浏览器中自动播放视频安卓和IOS不同 h5在安卓微信浏览器上的视频不能自动播放 h5在iOS微信浏览器上的视频可以自动播放 iOS的实现方案
如何实现自定义倍速播放PC端浏览器中的视频
如何实现自定义倍速播放PC端浏览器中的视频随机打开一个有视频的浏览器按键[F12]弹出窗口点击console或控制台在红框处输入代码 document.querySelector(" ...
苹果微信html音乐播放,HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio
本篇教程探讨了HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> Aut ...
网页中插入视频无法播放解决问题
网页中插入视频: <video controls="controls" width="600" height="400">< ...
解决安卓微信浏览器中location.reload 或者 location.href失效的问题
解决安卓微信浏览器中location.reload 或者 location.href失效的问题参考文章: (1)解决安卓微信浏览器中location.reload 或者 location.href失 ...
js判断是否在微信浏览器中打开
js判断是否在微信浏览器中打开 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroM ...
在微信浏览器中 location.reload() 不刷新解决方案(直接调用方法)
1.问题在微信浏览器中,需要时刷新当前页面. 正常情况下我们直接使用 location.reload 方法来刷新. 2.解决方法 function realod(){var {search,href ...

微信浏览器中控制视频的播放

微信浏览器中控制视频的播放相关推荐

最新文章

热门文章