1.H5的meta类型
viewport：可视区域1
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,minimum-scale=1.0,width=device-width"/>
- width ：viewport的宽度，正整数，值为”width-device”时表示设备宽度
- height ：viewport的高度，较少使用
- initial-scale ：页面初始缩放值，数字，可带小数
- user-scalable ：是否允许用户对页面进行缩放，值为yes/no
- maximum-scale ：允许用户的最大缩放比例，可带小数
- minimum-scale ：允许用户的最小缩放比例，可带小数
format-detection：格式检测1
<meta name="format-detection"content="telephone=no,email=no,date=no,address=no">
- telephone ：设置为no，禁止浏览器将数字转化为拨号链接
- email ：禁止浏览器识别邮箱地址，点击后不自动发送
- address ： 禁止跳转至地图
1 | // 表示页面适合在pc和移动设备上浏览 |
1 | // 针对IOS的Safari顶端状态条的样式 default/black/black-translucent |
1 | // 删除默认的苹果工具栏和菜单栏 |
1 | // 微信分享页面设置(未实践考证，参考他人文章获取) |
2.H5视频不全屏播放
1 | <video webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"></video> |
- x-webkit-airplay ：支持Airplay的设备（如：音箱、Apple TV)播放
- webkit-playsinline ：播放视频不全屏
- x5-video-player-type ：腾讯x5内核系的android微信和手Q内置浏览器用的浏览器webview的内核，使用这个属性在微信中视频会有不同的表现，会呈现全屏状态，貌似播放控件剥去了，至少加了这个属性后视频上层可以有其他dom元素出现
视频封面在ios下会根据设置的video宽高铺满，android下则可能会出现被压缩显示等问题，如果不设置video的poster值，android下又可能无法截取视频第一帧做封面，而导致video标签的区域在未播放时为黑色。
参考处理：在video上加一层div用于显示封面，播放时再将该层移除或hide。
3.H5视频自动播放
autplay在ios和android下的浏览器都不管用啊（摔）。
在微信中，通过事件”WeixinJSBridgeReady”，实现自动播放（ios有效，android不ok），android的微信和浏览器一样触发了play()方法，但是仍不会播放，必须用户有touch才可以。
界面上可做一些引导用户touch或点击等行为的图标等。1
2
3
4document.addEventListener("WeixinJSBridgeReady", function (){
video.play();
video.pause();
}, false)
当第一次播放视频的时候ios端，如果网络慢，视频从开始播到能展现画面会有短暂的黑屏（处理视频源数据的时间），为了避免这个黑屏，可以在视频上加个div浮层（可以一个假的视频第一帧），然后用timeupdate方法监听，视屏播放及有画面的时候再移除浮层1
2
3
4
5
6
7video.addEventListener('timeupdate',function (){
//当视频的currentTime大于0.1时表示黑屏时间已过，已有视频画面，可以移除浮层（.pagestart的div元素）
if ( !video.isPlayed && this.currentTime>0.1 ){
$('.pagestart').fadeOut(500);
video.isPlayed = !0;
}
})