吴亦凡入伍广告是用什么软件做的 H5技术怎么实现

2015-9-9hs0

后来经过反复调试和测试,发现一个规律,把视频2在自带的控制条上手动触发播放,等开始播放之后,再手动暂定,然后再播放1,等视频1结束后调用视频2 是正常的,也不会报错。

基本上可以总结成一个规律:只要视频2已经播放过,哪怕一帧就行,这样当视频1播放完毕之后再play视频2,就是正常的!


好既然找出规律来,那么就好办了,怎么监视视频播放过呢?由于没有现成的api.只能用别的事件来控制了~

因为在之前已试过video的N多事件,这时候该 timeupdate 登场了。 文档解释是:当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。

逻辑就是只要有视频播放的时候,这个事件就会不断地被触发。当有了播放时间(currentTime>0)了,就说明已经播放过了,然后暂停它。等着再次被play();

吴亦凡入伍广告是用什么软件做的 H5技术怎么实现图片7

兼容android尝试能不能只需要一次滚屏事件就完成这个交互,不过又掉进android里面的touchmove、touchend的坑里。


总结Android下

一、不能存在两个初始化的video,会报错

二、没有用户主动触发行为,play()执行是无效的,但在该视频在已经被播放的情况下是可以不用用户主动触发直接Play()是可以的(必须是已经播放过,即使初始化完成,直接Play()也是不行的)。


最后关于兼容腾讯新闻app和IOS自带浏览器的问题在这里就不细说了。另外在某些iphone5和5S在safari下,如果当前页面的后面有全屏的视频,即使不显示,位置也不在视窗内。点击页面时会出现“点透”的BUG,页面上的任何触屏事件都捕获不到,就是触屏事件全被看不到的video抢去,解决方法就在video隐藏的时候设置 width:1px; height:1px; 等到播放的时候再设置成全屏的宽高。

想学习怎么做的同学看完有没有收获呢?是不是手痒了?赶紧自己也去试试吧~

相关软件

相关文章

猜你喜欢

盖楼回复X