html5 video微信浏览器视频不能自动播放
html5 video微信浏览器视频不能自动播放
一.微信浏览器(x5内核):
1.不能自动播放
2.全屏
3.最顶层(z层的最顶层)
二.ios系统解决方案:(无phone手机未测试)
<audio preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.mp3" loop></audio>
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<!-- 必须加在微信api资源 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
//一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以
document.getElementById('car_audio').play();
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener("WeixinJSBridgeReady", function () {
document.getElementById('car_audio').play();
document.getElementById('video').play();
}, false);
</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.白名单;
html5 video微信浏览器视频不能自动播放的更多相关文章
- egret 篇——关于ios环境下微信浏览器的音频自动播放问题
前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了.期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题. 个人感觉吧,egret自己封装 ...
- ios端微信浏览器 音乐不自动播放问题
<audio id=''music src='' preload autoplay loop> <script src="http://res.wx.qq.com/open ...
- 网页视频不能自动播放?HTML5 video报错Uncaught (in promise) DOMException解决方法
话说发哥四年前写了一个网页,如上图效果,实际网址http://pano.z01.com ,话说做好时是正常的,突然某一天,客户说你这个网站动画不见了,这是什么原因? 结果检查脚本一切正常. 其实也不是 ...
- 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决
为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...
- html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案
html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...
- 怎样解决Chrome浏览器因为禁止音频自动播放所造成的视频无法自动播放且报错: Uncaught (in promise) DOMException的问题
这个问题是谷歌基于用户体验方面的考虑, 对页面加载时自动播放的音频作了限制, 试想一下, 如果你打开某个页面就立刻自动播放某种不可描述的声音, 那体验想必是十分酸爽. 尽管这个设定是针对音频的, 但实 ...
- 【bug解决】ios微信浏览器中背景音乐无法播放
我记得之前在一次项目中,出现过浏览报错: 当时的文档链接如右:[解决]HTML5新标签audio的autoplay自动播放属性失效的解决方案 所以在这次H5的制作中,我使用了iframe来加载音频文件 ...
- HTML5做的浏览器欢迎界面自动跳转
HTML5做的浏览器欢迎界面自动跳转 思路很简单,随手装逼呗.根据时间来控制背景图和文字,背景图加了毛玻璃效果,效果直接看图,用javascript来实现. 完整代码 <!DOCTYPE htm ...
- iphone微信 h5页音乐自动播放
iphone微信 h5页音乐自动播放: // iphone自动播放 document.addEventListener("WeixinJSBridgeReady", functio ...
随机推荐
- ITextSharp Table使用 (转)
原文:http://www.cnblogs.com/LifelongLearning/archive/2011/05/16/2048116.html 表格是我们在制作文档时,经常使用的一个元素.对布局 ...
- AD芯片的基准参考电压问题
基准参考电压的精度一般非常高的! AD芯片 : AD9226的基准参考电压 误差一般是 千分之一! 我之前用万用表测量AD9226的参考电压大概是1.89V(这款AD的正确参考电压应该是2V),所 ...
- WP10通过StreamSocket连接C++服务器
注:当服务端和手机模拟器运行在一台机器时,会有奇怪错误.将服务端放在其它机器上更改客户端连接地址,运行正常.或者直接用本机modern调试也可以. 实例化一个对象 StreamSocket _clie ...
- Java开发需要注意的流程
将一些需要变动的配置写在属性文件中 比如,没有把一些需要并发执行时使用的线程数设置成可在属性文件中配置.那么你的程序无论在DEV环境中,还是TEST环境中,都可以顺畅无阻地运行,但是一旦部署在PROD ...
- JSON数据的解析方法
1.JSON.parse(json) 2.new Function(“return ” + json) (); 3.eval(“(”+json+”)”)
- JAVA事件监听机制的实现
今天学习了java的事件编程机制,略有体会,先在此记下心得. 第一,首先明确几个概念. 事件源:一个产生或者触发事件的对象.事件:承载事件源状态改变时的信息对象.事件监听器接口:实际上就是一个类,该类 ...
- kettle init oracle jdbc
- 3.使用Maven构建Web项目
转自:https://blog.csdn.net/m261030956/article/details/46481837 从网上查了一些资料,才算明白(也就是怎么操作吧),怎么使用Maven构建一个W ...
- Mycat实战之主键数据库自增方式
创建一个 person表,主键为Id,hash方式分片,主键自增(采用数据库方式) #person表结构如下 Id,主键,Mycat自增主键 name,字符串,16字节最长 school,毕业学校,数 ...
- Java占位符替换工具类
import java.util.HashMap; import java.util.Map; import org.slf4j.Logger; import org.slf4j.LoggerFact ...