【H5】html5 video 在微信浏览器视频不能自动播放 !
html5 video在安卓微信浏览器视频不能自动播放 !
html5 video在安卓微信浏览器视频不能自动播放 !
html5 video在安卓微信浏览器视频不能自动播放 !
注:重要的事情说三遍, 其他帖子说可以自动播放的我都有试过,一个生效的都没有。
一.微信浏览器(x5内核):
1.不能自动播放
2.全屏
3.最顶层(z层的最顶层)
二.ios系统video自动播放:(经手机测试没有问题可以实现)
<div class="playvideo"><div class="zy_media"><video id="myVideo" muted autoplay poster="https://r1.ykimg.com/05420408584A363C6A0A47047DD24931"data-config='{"mediaTitle": "测试视频--视频"}'><source src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4" type="video/mp4">您的浏览器不支持HTML5视频</video></div></div><script>function autoPlayVideo() {/* 自动播放视频效果,解决浏览器或者APP自动播放问题 */function videoInBrowserHandler() {videoPlay(true);document.body.removeEventListener('touchstart', videoInBrowserHandler);}document.body.addEventListener('touchstart', videoInBrowserHandler);/* 自动播放视频效果,解决微信自动播放问题 */function videoInWeixinHandler() {videoPlay(true);document.addEventListener("WeixinJSBridgeReady", function () {videoPlay(true);}, false);document.removeEventListener('DOMContentLoaded', videoInWeixinHandler);}document.addEventListener('DOMContentLoaded', videoInWeixinHandler);}function videoPlay(isPlay) {var media = document.getElementById('myVideo');if (isPlay && media.paused) {media.play();}if (!isPlay && !media.paused) {media.pause();}}</script>
三.android系统中解决方案:暂未发现可以实现的例子
误区:(无效的解决方案)
1.设置video属性autoplay;
2.通过js调用play();
3.通过js来触发click事件;
4.使用插件videojs;
5.通过js调用load()然后再调用play();
6.设置video属性webkit-playsinline="true";
7.touchstart监听;
8.stalled事件处理;
9.canplaythrogh事件处理;
10.readyState大于2的处理;
11.DOMContentLoaded监听;
12.微信js api中WeixinJSBridgeReady;
13.微信js api中getNetworkType;
14.白名单;
【H5】html5 video 在微信浏览器视频不能自动播放 !相关推荐
- html5 video微信浏览器视频不能自动播放
2019独角兽企业重金招聘Python工程师标准>>> html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的 ...
- 苹果微信html音乐播放,HTML5教程 在iOS微信浏览器中如何自动播放HTML5 audio
本篇教程探讨了HTML5教程 在iOS微信浏览器中如何自动播放HTML5 audio,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> Aut ...
- 解决苹果手机微信音视频不能自动播放问题
加载以下代码即可 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> ...
- html5微信自动播放视频,科技常识:HTML5页面音视频在微信和app下自动播放的实现方法...
今天小编跟大家讲解下有关HTML5页面音视频在微信和app下自动播放的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5页面音视频在微信和app下自动播放的实现方法 的相关 ...
- html音视频app制作,怎么实现HTML5页面音视频在微信和app下自动播放
怎么实现HTML5页面音视频在微信和app下自动播放 发布时间:2020-09-28 15:52:53 来源:亿速云 阅读:90 作者:小新 这篇文章给大家分享的是有关怎么实现HTML5页面音视频在微 ...
- H5的video 在安卓浏览器上层级问题
项目场景: H5的video 在安卓浏览器上层级问题 问题描述 H5的video 在安卓浏览器上层级问题 原因分析: 目前猜测是浏览器劫持video并且生成原生视频播放器 无法用z-index控制 解 ...
- [html] 如何解决微信浏览器视频点击自动全屏的问题?
[html] 如何解决微信浏览器视频点击自动全屏的问题? 1.1 页面内播放 X5内核视频在用户点击后默认会进入全屏播放,前端可以设置video的x5-playsinline属性来将视频限定于网页内部 ...
- 微信播放在服务器视频无法播放音乐,【bug解决】ios微信浏览器中背景音乐无法播放...
我记得之前在一次项目中,出现过浏览报错: 所以在这次H5的制作中,我使用了iframe来加载音频文件,使用这种方式后,电脑端是没有问题的,但是当上传至服务器上在手机上浏览时,会出现点击音乐旋转按钮无法 ...
- 微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片 背景 解决方案 文章参考 背景 微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: let a = document.crea ...
最新文章
- 想进大厂?Dubbo 普普通通 9 问你知道吗
- genymotion报错Your CPU is incompatible with virtualization technologies
- Comments on task “Smart Service II: Wrap up and make it ready for Demo“
- 【Blog.Core重要升级】:封装服务扩展层
- 光纤收发器常见故障及解决方法
- Java基础-异常处理机制
- 【SQL注入-02】SQL注入点的简单判断
- java完成crm系统ppt,客户关系管理系统答辩稿.ppt
- JSbridge原理与实现简析
- 虚拟机安装中标麒麟服务器,如何在VMware Workstation中安装中标麒麟7.0
- Linux 之六 Shell、终端(Terminal)、控制台(Console)、CLI 命令行界面、GUI 图形用户界面(X、X11、Xfree86、Xorg、GNOME、KDE)
- 股票多空量化策略通过合理释放beta收益一定程度上提升了组合的收益风险比?
- 微信公众号官方API开发之配置服务器
- 今天来聊聊函数function func()
- 科学论文类型分类(letter, perspective, focus, article)以及影响引子,SCI、EI等
- 永磁同步电机高频注入simulink仿真模型下载
- 2021/05/05 OJ每日一题 2132: Tmk吃汤饭 python
- 50个CSS编辑工具
- oracle10.2精简,请问版主和高手们,Oracle 10.2 完美精简版客户端下载-30M如何使用?...
- three.js SVG 学习绘制三维地图