关于video h5项目问题记录

关于video h5项目问题记录

第一次写博客，可能会很粗糙，只是记录一下平时开发遇到的一些问题。我也是一个刚入职公司的新手前端，给我第一个测试题是一个h5的页面，内嵌video视频，看起来挺难，实际开发起来也不是很难。

一些常用的属性及方法

autoplay: 定义这个属性，视频一旦就绪就会自动播放。
controls 定义该属性会为视频提供控件、暂停/播放、音量、全屏等。
poster 设置视频播放前的海报视频，如果没有定义，默认为视频第一帧来代替。
preload 视频预加载，定义该属性会在页面加载时加载视频，预备播放。
src 视频路径来源。
timeupdate 视频播放位置发生改变时事件。
conplay 视频可播放时事件。
playsinline 视频局域播放，不脱离文档流(不全屏，一般在页面中制定video大小窗口播放)。
webkit-playsinline 支持iso10。
x5-playsinline 在x5内核中播放视频不自动全屏，能解决大部分安卓手机兼容问题。
更多请前往W3school。

移动端兼容

<video src="" data='0' id="video" autoplay x-webkit-airplay="true" airplay="allow" webkit-playsinline="true" playsinline="true"></video>

这些属性安卓ios基本能兼容了。

项目中遇到的问题

在移动端判断视频是否开始最好监听timeupdate事件，判断currentTime是否大于0，第一次使用video标签的我监听了canplay，结果被打回，canplay事件在移动端支持不够好。

结语

目前本人比较菜，大佬们多多指点！