视频播放是个坑。。。
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();