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 ...
随机推荐
- python3+ros+telnet+telnetlib
利用python3的telnetlib模块 远程登录ros,输入帐号密码,然后执行命令,并导出结果到txt文本: 不过实际操作这种方式不行,因为telnet导出来的文本文件,带颜色编码,根本无法看哦. ...
- Angular2快速入门-1.创建第一个app
一.环境搭建 Angular2 运行在nodejs 环境下,需要我们先创建好nodejs环境,具体操作 1.下载安装Nodejs,参考网址,https://nodejs.org/en/ 选择64位 ...
- CDM中,创建一个或多个组合属性的唯一约束
除主键外,有时还需要创建一个或多个组合字段的唯一约束,方法如下: 双击打开实体,在idntifier标签页中可看到默认主键的唯一约束,在其下方添加一条记录,然后双击该记录,打开约束设置窗口 在该窗口的 ...
- 如何查看apache加载了哪些模块
apache2/bin/apachectl -l 可以看到类似下面的结果: 这是编译时就已编译在apache中的模块,启动时自然会加载. 另外一部分,要看apach的配置文件(httpd.conf)的 ...
- LCS(详解)
一,问题描述 给定两个字符串,求解这两个字符串的最长公共子序列(Longest Common Sequence).比如字符串1:BDCABA:字符串2:ABCBDAB 则这两个字符串的最长公共子序列长 ...
- latex 显示中文
中文支持需要cjk-latex,总得来说中文可以使用GB和GBK两种字体,GBK需要从windows下copy *.ttc或*.ttf, GB字体则在linux下就用. 先说支持GB的中文显示,安装以 ...
- Java两大测试方法Junit和TestNG的比较
开发过程中,经常会用到JAVA测试,前端javas cript的调试相对比较轻松,firebug,console.log()等,但是java的就比较纠结点,每次改完都要去编译再运行,过程相对缓慢,加上 ...
- 18-拍卖叫价(hdu2149 巴什博弈)
http://acm.hdu.edu.cn/showproblem.php?pid=2149 Public Sale Time Limit: 1000/1000 MS (Java/Others) ...
- mybatis学习笔记 spring与mybatis整合
转载自http://blog.csdn.net/naruto_Mr/article/details/48239357 1.创建web工程,导入spring依赖包与mybatis依赖包,还需要mybat ...
- getopt两个模块getopt 和gun_getopt 的异同
getopt的两个模块getopt和gun_getopt都可以接收参数,但是又有不同; 先看 getopt.getopt这个模块: import sys import getopt def main( ...