video 播放

视频播放是个坑。。。

 

HTML5 Video API : https://www.w3.org/2010/05/video/mediaevents.html

虽然界面很丑，但是事件、属性很全。

进行视频操作前务必查阅。

 

很多属性事件在手机端无法获取。。。

具体可参考：http://www.xuanfengge.com/html5-video-play.html

（之后补全可获取的属性事件）

 

ios与安卓 均支持以下属性：

video.ended

video.currentTime

 

一、ios端控制视频播放

 

<video src=" " id="video"  x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"

></video>

 

1.目前只有ios7+、winphone8+支持自动播放
2.支持Airplay的设备（如：音箱、Apple TV)播放
　　x-webkit-airplay="true" 
3.播放视频不全屏，ios7、、winphone8+支持，部分android4+支持（含华为、小米、魅族）
　　webkit-playsinline="true" 
4.ios 10 : playsinline
5.ios 8、9 ：https://github.com/bfred-it/iphone-inline-video

二、安卓端控制视频播放 

安卓上的微信调用X5浏览器内核，视频样式无法自定义。。。

X5浏览器内核遇到的问题具体可参考以下链接：

https://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/

 x5-video-player-type

启用同层播放。取值固定为'h5'。

 

 

 

x5-video-player-fullscreen

是否全屏。取值为'true'或'false'。

 

 

1.安卓上只有在 WeixinJSBridgeReady 这个事件下才能使视频自动播放！！！

例：

document.addEventListener("WeixinJSBridgeReady", function () {

$("#video").play();

});

2.安卓上只有用户进行点击等触发事件才能播放视频，不可以在点击事件后设置 setimeout 控制视频多少秒后进行播放，不然会出现video的播放按钮（安卓下的默认样式），仍需用户点击才能播放。

3.video的层级默认最高，如需在video上添加封面等高于video层级的图层，需要将video的宽高设为0，播放视频时需要重新设置video的宽高。

 

$('#video').width(0).height(0);

$('#video').width(640).height(1040).get(0).play();