H5中video使用 - HelloWorld开发者社区

属性介绍：
1）src:视频地址

2）controls:Gecoko会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放；  

3）poster：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。如果未能设置该属性，则使用视频的第一帧来代替；  

4）preload：属性规定在页面加载后载入视频；  

5）webkit-playsinline和playsinline：视频播放时局域播放，不脱离文档流。但是这个属性比较特别，需要嵌入的APP比如webchat中

webview.allowsInlineMediaPlayback = YES,才能生效。换句话说，如果APP不设置，你页面中加了这标签也无效，这也就为什么安卓手机
wechat视频播放总是全屏，因为APP不支持playsinline,而IOS的wechat支持；
这里就要补充下，如果是想做全屏直播或者全屏H5体验的用户，IOS需要设置删除 webkit-playsinline 标签，因为你设置 false 是不支持的，
安卓则不需要，因为默认全屏。但这时候全屏是有播放控件的，无论你有没有设置control。做直播的可能用得着播放控件，但是全屏H5是不需要的，
那么去除全屏播放时候的控件，需要以下设置：同层播放

6）x-webkit-airplay="allow";这个属性应该是此视频支持IOS的AirPlay功能。使用AirPlay可以直接从使用IOS的设备上的不同位置播放视频

音乐还有照片文件。也就是说通过AirPlay功能可以实现影音文件的无线播放，当然前提是播放的终端设备也要支持相应的功能；

7）x5-video-player-type:启用同层H5播放器，就是视频全屏的时候，div可以呈现在视频层上，也就是wechat安卓特有的属性。

同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下“X”和“<”。目前的同层播放只能在
Android（包括微信）上生效，暂时不支持IOS。

8）x5-video-orientation：声明播放器支持的方向，可选值为landscape横盘，portaint竖屏（默认值）。无论是直播还是全屏H5一般都是竖屏播放，

但是这个属性需要x5-video-player-type开启H5模式；

9）x5-video-player-fullscreen：全屏设置，它有两个属性： true 和 false；

全屏处理
ios:
ios加playsinline属性，之前加webkit前缀的在ios10以后，会吊起系统自动播放器，两个属性都加上基本ios端都可以保证内敛到浏览器webview中。
如果仍有个别版本的ios会吊起播放器，还可以引用iphone-line-video。
android：
x5-video-player-type="h5"属性，腾讯X5内核系的android微信和手Q内置浏览器用的浏览器webview内核，使用这个属性在微信中适配会有不同的表现，
会呈现全屏状态，貌似播放控件剥去了，至少加上这个属性后视频上层可以由其他DOM元素出现。

自动播放
android始终不能自动播放，不多说。值得一提，经测现在ios10后的safari和微信都不能让视频自动播放了（顺带音频也不能自动播放了），但是微信提供了一个事件
WeiXinJSBridgeReady，在微信嵌入webview全局的这个事件触发后，视频仍可以自动播放，这个应该是现在ios端微信的视频自动播放比较靠谱的方式。其他如手q或其他浏览器，建议
就引到用户触发触屏行为操作；
document.addEventListener('WeixinJSBridgeReady',function(){
video.play();
video.pause();
},false)

播放控制
对于video或者audio等媒体元素，有一些方法，常用的有play(),pause()也有一些事件如‘loadstart,canplay,canplaythrough,ended,timeupdate’等等。
在移动端有一些坑要注意，不要轻易使用媒体元素除“ended,timeupdate”以外的event事件，在不同的机子上会产生不同的情况。例如：ios下监视“canplay”和“canplaythrough”
(是否已缓冲了足够的数据可以流畅播放），当加载时是不会触发的，即使preload="auto"也没用，但在pc的chrome调试器下和android下，是会在加载阶段就触发。ios需要播放后才会
**触发。
**就是当第一次播放视频的时候ios端，如果网络慢，视频从开始播到能展现画面会有短暂的黑屏（处理视频源数据的时间），为了避免这个黑屏，可以在视频上加个div浮层（可以一个假的视频第一帧）
，然后timeupdate方法监听，视频播放及有画面的时候再移除浮层。
video.addEventListener('timeupdate',function(){
//当视频的currentTime大于0.1时，表示黑屏时间已过，已有视频画面，可以移除浮层
if(!video.isPlayed && this.currentTime>0.1){
$('.pagestart').fadeOut(500);
video.isPlayed = !0;
}
})

隐藏播放控件
据说腾讯的安卓团队的X5内核放开了视频播放的限制，视频不一定调用他们那个备受诟病的视频播放器了，x5-video-player-type="h5",上层可以浮动div或其他元素
`

<div class="videobox" ontouchmove="return false;"> <video id="mainvideo" src="test.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video> </div>

比如这个videobox在android下隐藏，只用display：none貌似还是不行的，但加个z-index:-1，设置成-1就可以达到隐藏播放器控件的目的了。