视频H5のVideo标签在微信里的坑和技巧

随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5,在这里介绍一些实践经验。 统一播放效果 我们希望视频播放时可以全屏播放,没有进度条、播放按钮等与系统相关的元素,可以在视频上方增加自定义的元素(比如一个跳过按钮),类型下面的效果: 在不同的操作系统(主要就是 iOS 和 Android),为了达到比较统一的播放效果,分别对其进行兼容。 iOS 在 iOS 上,APP 都是使用的系统自带的浏览器进行页面渲染,video 播放视频的效果是统一的,只需要考虑不同的 iOS 版本是否有不一致的地方。在 iOS 上,播放视频默认会弹出一个播放器全屏播放视频,如下效果 播放器上下有的系统默认的控制栏,可以控制视频的播放进度、音量以及暂停或继续播放,播放视频时,视频会 “浮” 在页面上,页面上的所有元素都只能是在视频下面,这种效果显然不是我们想要的。 但好在 iOS 10 Safari 中,video 新增了  playsinline 属性,可以使视频内联播放。 在 webkit 的 blog 上提到  A note about the playsinline attribute: this attribute has recently been added to the HTML specification, […]

浅析移动端lazyload优化

利用lazyload进行对移动端优化,在元素进入可视区域或即将进入可视区域时进行加载动作,本文分别从响应式图片、事件节流、事件的监听与触发等等几个方面来浅析利用lazyload进行优化移动端。

© 2017 JDC. All Rights Reserved.