h5 video标签

h5 video标签：

Video 对象属性

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象。
autoplay   *	设置或返回是否在就绪（加载完成）后随即播放视频。
buffered	返回表示视频已缓冲部分的 TimeRanges 对象。
controller	返回表示视频当前媒体控制器的 MediaController 对象。
controls  *	设置或返回视频是否应该显示控件（比如播放/暂停等）。
crossOrigin	设置或返回视频的 CORS 设置。
currentSrc	返回当前视频的 URL。
currentTime	设置或返回视频中的当前播放位置（以秒计）。
defaultMuted	设置或返回视频默认是否静音。
defaultPlaybackRate	设置或返回视频的默认播放速度。
duration	返回视频的长度（以秒计）。
ended	返回视频的播放是否已结束。
error	返回表示视频错误状态的 MediaError 对象。
height   *	设置或返回视频的 height 属性的值。
loop    *	设置或返回视频是否应在结束时再次播放。
mediaGroup	设置或返回视频所属媒介组合的名称。
muted   *	设置或返回是否关闭声音。
networkState	返回视频的当前网络状态。
paused  *	设置或返回视频是否暂停。
playbackRate	设置或返回视频播放的速度。
played  *	返回表示视频已播放部分的 TimeRanges 对象。
poster   *	设置或返回视频的 poster 属性的值。
preload  *	设置或返回视频的 preload 属性的值。
readyState	返回视频当前的就绪状态。
seekable	返回表示视频可寻址部分的 TimeRanges 对象。
seeking	返回用户当前是否正在视频中进行查找。
src   *	设置或返回视频的 src 属性的值。
startDate	返回表示当前时间偏移的 Date 对象。
textTracks	返回表示可用文本轨道的 TextTrackList 对象。
videoTracks	返回表示可用视频轨道的 VideoTrackList 对象。
volume	设置或返回视频的音量。
width  *	设置或返回视频的 width 属性的值。

Video 对象方法

Method	描述
addTextTrack()	向视频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的视频类型。
load()	重新加载视频元素。
play()	开始播放视频。
pause()	暂停当前播放的视频。

说明：

  object-fit: fill   视频内容充满整个video容器

  poster:"img.jpg" 视频封面

  autoplay： 自动播放

     auto - 当页面加载后载入整个视频

     meta - 当页面加载后只载入元数据

     none - 当页面加载后不载入视频

  muted：当设置该属性后，它规定视频的音频输出应该被静音

  webkit-playsinline和playsinline:   内联播放（防止IOS手机自动全屏播放，但是该属性并不能完全控制所有IOS手机均非全屏播放）

  x5-video-player-type="h5" :  启用x5内核H5播放器（android 微信）

  x5-video-player-fullscreen="true"  全屏设置。ture和false的设置会导致布局上的不一样

  x5-video-orientation="portraint" ：声明播放器支持的方向，可选值landscape 横屏,portraint竖屏。

                                     默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，

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


webkit-playsinline和playsinline、x5-video-player-type="h5"说明：
在iOS Safari和一些安卓的一些浏览器下播放视频的时候，不能在h5页面中播放视频，系统会自动接管视频
如果需要在h5页面内播放视频，需要在视频标签上加上 webkit-playsinline，在iOS10以后，需要加上playsinline,建议同时加上这两个属性。同时还需要app支持这种模：
webview.allowsInlineMediaPlayback = YES;
ios手Q和微信都支持这种模式，但是android 微信就挂了
android 微信：android微信内置浏览器采用腾讯X5内核，不遵循X5web标准，video强制全屏就是其一。视频播放完毕后还会出现QQ自己的视频推荐

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

视频格式说明（常用H.264）：

案例：

.de-video-con{width: 200px;height: 160px;margin: auto;text-align: center;border: 1px solid #705dcc;overflow: hidden;background:url("img/defalut_video.png") no-repeat center;background-size:cover;}
.video-menu{display: inline-block;width: 40px;height: 40px;margin-top: 60px;background: url("img/video_menu.png") no-repeat center;background-size:cover;cursor: pointer;}
#des_video{display: none;height: 100%;}

<div class="de-video-con">
    <i class="video-menu"></i>
    <video id="des_video" width="100%" preload="auto" poster="img/defalut_video.png" webkit-playsinline="true" playsinline="true" x5-video-player-fullscreen="true" x-webkit-airplay="true" style="width: 100%;object-fit:fill;" src="img/Cupid_video.mp4">您的浏览器不支持 video 标签!</video>
</div>

var DES_VIDEO = $("#des_video").get(0);
$(document).on('click', '.video-menu', function(){
	$(this).hide();
	$('#des_video').show();
	//console.log(DES_VIDEO.readyState);
	DES_VIDEO.play();
});

//播放结束
DES_VIDEO.addEventListener('ended', function () {
   	//console.log(DES_VIDEO.ended);
	$('#des_video').hide();
	$('.video-menu').show();
});

问题：测试的时候发现，同一部手机在qq、微信、浏览器里运行效果略有差异，主要是是否是内联播放效果。在部分IOS手机里出现全屏播放，播放完毕后再按播放键进度是重新播放的进度但是却没有动画背景一片黑。

解决：用插件iphone-inline-video控制内联播放

插件地址：https://github.com/bfred-it/iphone-inline-video