ios下监听
'canplay'和'canplaythrough'(是否已缓冲了足够的数据可以流畅播放),当加载时是不会触发的,即使preload="auto"也没用,但在pc的chrome调试器下和android下,是会在加载阶段就触发。ios需要播放后才会触发。总之就是现在的视频标准还不尽完善,有很多坑要注意,要使用前最好自己亲测一遍。
关于控制的问题还想说一点就是android在播放视频时会有个控件初始化的过程,在全屏视频想伪装成非视频时,是我们很不想看到的,我的解决思路是这样:
在我们需要播放时提前初始化它,即需要播放的时间前先设width:1px;然后play()一下,使视频已经播放初始化。然后再需要播放的时候再次play()时就不会产生,控件拉伸的情况了。
“去除”android下的播放控件条
重头戏来了,相信这个这个问题已困扰无数的前端开发人员,再搜寻这个问题的解决方法时,几乎所有的文章都是告诉你android下,播放器的控件是去不了的。其实似乎确实是这样的,但你看了故宫穿越H5,和吴一凡那个H5后,会发现,在android下,也是没有控制条的。最初看到那些H5视频我首先并没有去看他们的内容多么新颖,传播量多么广,我是第一时间测试了android下的兼容问题,发现并没有出现控制条。在我研究半天未果时,在一篇技术帖中看到说:因是腾讯自己的项目,微信是腾讯自己的,他们在浏览器里做了一些配置,对旗下出品的H5有所“优待”,才能确保视频的顺利“乔装”。
上面的说法我并没有真正核实过,但好像是这么回事,非常有幸我做的那个视频项目也是腾讯的,其实是有机会可以向他们证实一下以上说法的,但即使是这样的,也只有腾讯的项目有这样的解决办法,对于广大的开发者来说似乎并太不公平,我试图找到一种解决去除播放控件的解决方案,下面是我花了很多心思找到的一种解决办法,看似很简单也不那么高大尚,但确实解决了问题,跟大家分享:
我这里只看android的情况,ios基本没什么问题,就忽略啦。
测试机android版本:5.1
首先我们将那个H5视频地址嵌入自己的页面,你会发现确实播放器出现了。如下

怎么办呢,不是腾讯自己的项目就没办法了嘛?再我搜了N多资料未果后,
发现了一个细节,控制条始终是最下方的,可不可以让视频的尺寸放大些,将控制条顶到浏览窗口外面,就看不到了嘛,于是我将视频宽高放大到120%-----控件条神奇的‘消失’了(其实是顶到视窗外面了),惊喜万分啊。









