目前H5基本上是在微信上传播和展示,系统类型和微信环境在很大程度上影响最终展示效果和体验,iOS和Android的用户比例大概是3:7,不能放弃Android用户,但是体验摆在面前。微信每一次更新,也会造成某些效果的天差地别。
下面分享H5视频和音频在Android和iPhone的差异性,提前了解清楚,在制作过程中尽量避免这些问题。
视频篇
用户体验对比
Android手机上浏览视频存在的四大问题:
1、视频无法自动播放,只能是点击事件控制视频播放或者在视频页面手动点击控制;
2、无法隐藏视频播放的进度条,很多H5直接可以看出是视频效果;
3、视频播放时置顶,交互视频等效果都无法实现;
4、某些机型(如红米,华为部分机型,nexus等)视频强制全屏播放,播放结束后自带广告,必须手动点击手机自带的返回键才能跳回H5,由于跳出了H5,控制视频播放结束的删除事件实际已执行,但必须手动返回到H5才可以看到效果。
iPhone上基本不存在以上问题,体验相对完美。
独门秘籍
iH5目前有一个方法可隐藏Android手机视频进度条,但不一定所有Android手机都适用,尤其是强制全屏播放的手机。测试了小米4,华为V8,TCL,均看不到进度条。
方法:视频高度必须大于1040,舞台/设备属性的裁剪选Yes。
原因:舞台裁剪属性是在H5展示中,舞台长度超过Android手机显示屏幕时,会把底下的部分切掉。
注意:iH5编辑器上的“视频属性”→“画布”必须选No,且别忘记选自动播放或者添加事件触发视频播放。以前视频属性画布选Yes才满意控制条,但微信版本更新,若视频属性的画布选Yes,视频预览效果是白屏的。
官方问答
视频的限制,主要是微信内置X5浏览器在搞事,以下是来自腾讯浏览服务官网的解答,可能对大家有点帮助。
问:视频上方的播放按钮和播放进度条如何去掉?
答:在tbs里qq域名下的不会显示我们的面板,其它域名下,现在需要我们这边产品配置一下名单,在tbs2.1已经开始逐步放开(部份测试过的站点已经不在强制显示我们的面板)
问:Android 微信内,是否有办法在视频层之上放置素材元素?比如:在视频播放过程中,有一个网页元素在视频上漂浮。
答:在微信或手Q上,如果是qq.com域名下的video可以通过不指定control属性(表明由页面自己绘制控制面板)来控制,如果指定了control属性我们就会用我们的播放器完全覆盖页面上相应区域作何元素,如果不指定control属性的,内核就只绘制视频内容,需要由页面自己实现播放控制逻辑
问:为何在微信内置x5浏览器中,视频不能自动播放?
答:设计如此,禁止自动播放,防止在数据网络下自动播放,浪费流量
机智的我猜到你会问我,为什么iPhone可以自动播放!下面有答案,但我看不懂,所以别问我!
iPhone自动播放视频,可以通过以下代码解决,但必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效,可能是微信接口对此做了某些限制。
(该代码源自互联网,仅供参考)
<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手机基本上是无法同时播放多个音频。若有多个音频,比如有背景音乐和其他音效,其他音频播放时,背景音乐会自动暂停。因此记得增加事件控制背景音乐继续播放。
iPhone微信最新版本(6.5.5)只能自动播放或者通过轻触事件直接或者间接触发音频播放。原因是微信限制了音乐播放方式,音乐页面下的事件,比如说页面显示,触发音频播放是无效的。间接的意思是可以通过轻触控制某个对象播放/出现,再控制音频播放,但是多于1层关系,就无效了。
官方问答
超多人问Android为什么不能同时播放2个,以下来自腾讯浏览服务官网问答可以给你答案!
问:播放音效时,为啥会把我后台的BGM播放给暂停掉?
答:播放音效需要获取声音输出焦点,目前只支持同时播放一个音效。(播放声音时当前音频需要获取 audiofocus ,系统在audiofocus丢失时会通知其它音频播放软件,这个暂停应该是播放软件自身的行为,我们本身并没有暂停后台音频,只是向系统申请了 audiofocus。)
序列帧
Android手机基本没太大问题,除了加载问题和体积太大有可能会跳帧。
iPhone 6以上,对资源比较敏感,一次性加载资源太大,容易造成闪退,这是所有H5都面临的问题。iH5上zip文件太大,可能会导致闪退或者load两次的情况。
解决方法:用iH5工具操作时,在画布下加幻灯片,上传zip文件。画布属性选canvas模式,幻灯片属性设置预加载比例(10%-70%,根据实际情况调整)。
手机版
电脑版