文档章节

html5 video微信浏览器视频不能自动播放

郁极风
 郁极风
发布于 2017/05/07 13:44
字数 345
阅读 152
收藏 1

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.白名单;

本文转载自:http://www.cnblogs.com/zlp520/p/6410739.html

共有 人打赏支持
郁极风
粉丝 8
博文 30
码字总数 8787
作品 0
长沙
程序员
私信 提问
H5视频兼容安卓、IOS踩坑相关

1.视频暂停和播放 将JQ对象转换为原生JS对象 有遮罩层的视频播放和暂停 2.音乐开关 3.视频切换+音量播放 pug js 4.微信不能够自动播放 5.页面强制横屏问题 6.H5--移动端视频video的android兼...

谭瞎
2018/07/28
0
0
HTML5 Audio/Video 标签,属性,方法,事件汇总

注:本文内容来源自W3C ,对原文进行了浓缩,但只对chrome浏览器进行了测试和验证。 W3C草案原文地址:http://www.w3.org/TR/html5/video.html 标签属性: src:音乐的URL preload:预加载 ...

红薯
2012/06/27
583
0
微信小程序 Html2Wxml4J 0.95 更新,支持 Video 和 Audio 解析

html2wxml4J是微信小程序前端html渲染组件html2wxml的后台接口Java版 本次更新内容: 【新增】Video视频标签解析 支持html5中Video标签大部分属性 支持自动播放 支持静音播放 【新增】Audio...

山东-小木
2018/08/07
1K
3
10 个免费的 HTML 视频转换工具

现在,人们都喜欢看视频目前,大多数的人都是看视频在线或移动。因此,视频必须有正确的格式,可以通过手机或支持系统。因此,人们需要一些应用程序的工具,将有助于他们现有的文件格式转换成...

oschina
2014/07/22
13.4K
16
zymedia的在使用中碰到的问题

记笔记,免忘记!最近用到了视频插件zyMedia。这个插件的简介地址:https://github.com/ireaderlab/zyMedia 问题一: 首先视频的上方显示的标题,实例是这样写的data-config='{"mediaTitle":...

zilvzsy
2018/05/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
1
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
昨天
1
0
推荐转载连接

https://www.cnblogs.com/ysocean/p/7409779.html#_label0

小橙子的曼曼
昨天
3
0
雷军亲自打造的套餐了解下:用多少付多少

12月28日消息,小米科技创始人兼CEO雷军微博表示,小米移动任我行套餐方案,原则上就是明明白白消费,用多少付多少,不用不花钱!上网、电话和短信都是一毛钱,上网0.1元/M,电话0.1元/分钟,...

linuxCool
昨天
6
0
协议简史:如何学习网络协议?

大学时,学到网络协议的7层模型时,老师教了大家一个顺口溜:物数网传会表应。并说这是重点,年年必考,5分的题目摆在这里,你们爱背不背。 考试的时候,果然遇到这个问题,搜索枯肠,只能想...

Java干货分享
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部