最近做了一些嵌入式视频活动，在视频方面积累了一些经验。下面将记录下别人和自己踩过的坑以及相应的解决方法。一、遇到的问题及解决办法1.1．ios网页播放的视频默认全屏（点击视频弹出播放器全屏播放）。解决无法全屏播放的问题，可以添加如下属性webkit-playsinline='true'和playsinline='true'。如果设置以上属性没有效果，可以用下面的插件试试。iphone-inline-video备注：在ios下打开微博网页播放视频会弹出播放器播放。设置playsinline属性无效。上面的插件也一定要用，亲测有效。1.2.播放andriod中的视频后，会显示推荐的视频。手机浏览器中的视频元素比较特别。早期无论是在iOS还是Android的浏览器中，都是位于页面顶部，无法被覆盖。后来在iOS下解决了这个问题，但是在Android浏览器上问题依旧。X5是腾讯基于Webkit开发的渲染引擎，提供了一种叫做“同层播放器”的特殊视频元素来解决遮挡问题。通过设置x5-video-player-type="h5"可以开启同层播放，避免播放后显示推荐视频的问题。x5-video-player-fullscreen="true"//视频全屏播放x5-video-orientation="portrait"//视频纵向播放1.3.视频适配目前设计师一般都是按照iphone5或者iphone7的标准来设计视频，一般可以播放宽高为100%的视频。如果发现视频还是不行，需要根据实际情况设置object-fit属性来解决。详见半深入理解CSS3object-position/object-fit属性备注：在webkit内核浏览器中，默认为object-fit:contain。1.4.js控制视频播放在ios中一般不会主动播放视频和音频，除非用户主动点击，所以需要用js监听界面的交互来控制视频播放。视频的播放和暂停主要是调用播放和暂停方法。如果在视频播放过程中需要进行一些用户交互，则主要通过timeupdate方法监控当前播放时间。看一段代码：varisStop=false;videoElem.on('timeupdate',function(){varcurTime=parseInt(videoElem[0].currentTime);if(curTime==152){//显示该时间点的交互遮罩$('.js_first_stop'.removeClass('hide');}elseif(curTime>152&&curTime==153){if(!isStop){//解决ios暂停后再次点击无法播放的问题，因为触发了多次isStop=true;videoElem[0].pause();}}elseif(curTime==248){$('.js_second_stop').removeClass('hide');}});在ios中监听timeupdate事件暂停视频时，需要引入一个全局的isStop变量，否则点击继续播放时没有任何反应（timeupdate触发多次暂停），而andriod则没有这个问题。判断视频结束，可以监听视频的结束事件videoElem.on('ended',function(){});或者监听视频的timeupdate事件，然后判断ended属性。如果是真的，就说明结束了，如果是假的，就说明还没有结束。videoElem.on('timeupdate',function(){if(videoElem[0].ended){//播放结束}}另外在andriod端开启同层播放器，微信端也提供2监听播放器进入同层事件和退出对端播放器。进入对端播放器事件（开始播放视频）。videoElem.on("x5videoenterfullscreen",function(){}点击左上角的返回按钮退出同层播放。videoElem.on('x5videoexitfullscreen',function(){}最后要注意的是那就是在andriod端播放完视频后，不会主动退出同层的播放器，以后如果有显示界面，也会显示在播放器里，感觉很奇怪。这里可以通过链接跳转来解决1.5.Canvas可以播放视频Canvas可以播放视频，但是在某些andriod机器上会出现严重的锯齿，有的andriod浏览器播放时只有声音没有图像1.6.视频encodingmp4格式的视频需要h.264编码，否则有些ios只有声音没有图像最后放一个完整的视频配置如下，仅供参考
