关于“吴亦凡入伍”H5背后的故事[页4]

短发发型图片2013女,润肤油,cf下载 迅雷

　　这里我们就会用到保持元素宽高比的技巧，为元素添加的padding-top百分比值。因为padding取值百分比时候，是相对于包含块的宽度而定的。我们的视频1比例是580X386,所以padding-top的值为386/580=66.55%。实现代码如下：

　　第二个就是两个视频连续播放的问题(中间不需要触发)，被这个问题折腾了好久。

<div class="video-box"> <div class="video">插入video...</div> <div class="bg-poster"></div> </div> .video-box{position: relative;width: 100% } .video{width: 100%; height: 100% } .bg-poster{width:100%; padding-top: 66.55%; position: absolute; top:0; left:0; 
background: url(./bg_poster.jpg) no-repeat 0 0; background-size: cover }

　　android下视频播放是需要用户主动触发的。用户主动触发行为比如：touch、click(注意：zepto的tap是触发不了),类似setInterval此类 或者touch之后setTimeout再播放，都是行不通的。

　　我们的需求是用户进到页面，当页面滚动一定高度之后，开始播放视频1，视频1播放完毕，不需要用户手动触发接着播放视频2。

　　转化到前端的逻辑就是说：用户滚动页面一定高度之后，要连续播放视频1,2 中间用户是没有用户触发行为的。

　　所以当时的解决思路这样的： 当用户有触发行为时，就同时初始化视频1和视频2，给视频1添加ended事件，视频1播放完毕后就直接播放视频2 [v2.play()]

　　$(document).one("touchstart", function() {$("#v1")[0].play();setTimeout(function() {$("#v1")[0].pause() }, 200);$("#v2")[0].play();setTimeout(function() {$("#v2")[0].pause() }, 200);});

　　然而现实却很残酷(在android下会提示解析错误或者弹框让你选择文件打开方式)

　　既然上面的方法不行，那就用另外一种方法：当用户第一次触屏页面的时候去初始化视频2，然后等用户滚动页面一定高度的时候再去播放视频1，当视频1播放完毕，在回调里面直接播放视频2:

　　//第一次触屏 初始化 视频2$(document).one("touchstart",function(){ $("#v2")[0].play(); $("#v2")[0].addEventListener("canplay",function(evt) { $("#v2")[0].pause(); }); });//滚动页面到一定距离播放视频1var isPlay; $(document).on("touchmove",function(){ if (isPlay) return; var d = $("#v1")[0].getBoundingClientRect().bottom; if (d < 120) { $("#v1")[0].play(); isPlay = true; } });//视频1 播放完毕回调里播放视频2$("#v1")[0].addEventListener("ended",function(evt) { $("#v2")[0].play(); });

　　但这样还是会报错，我在想是不是canplay的事件发生的时候，video还没有初始化完成，但文档里面又找不到video初始化完成的API。

　　于是把逐个看似跟video初始化完成差不多的事件全都试了个遍(感谢2w陪我试各种API)。包括oncanplaythrough oncanplay onplay onplaying onprogress onreadystatechange ontimeupdate... 结果统统都不行，不行... 先不说了，我得先去给我的android测试机充会儿电~

　　但自己承诺过的需求，含着泪也要完成~ (其实我会告诉你我当时已经开始暗想，当视频1播放完了，我要设计师给加一个按钮，提醒用户去点击,然后播放视频2么.)

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

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

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

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

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

　　var v1= $("#v1")[0];var v2= $("#v2")[0];//第一次触屏播放初始化视频2$(document).one("touchstart",function(){ v2.play(); });//视频1播放完成，回调播放视频2v1.addEventListener("ended",function(evt) { v2.currentTime = 0; v2.play() });//视频2添加事件 监听如果已经播放，就暂停function initVideo(){ if (v2.currentTime){ v2.pause(); v2.removeEventListener("timeupdate", initVideo, false); } } v2.addEventListener("timeupdate", initVideo, false);//滚动页面到一定高度播放视频1var isPlay; $(document).on("touchmove",function(){ var d = v1.getBoundingClientRect().bottom; if (isPlay) return; if (d < 120) { v1.play(); isPlay = true; } });

　　OK了~ 费了九牛二虎之力总算是能兼容android了，心好累。还在继续优化中，试试不能不能只需要一次滚屏事件就完成这个交互，不过又掉进android里面的touchmove touchend的坑里面去了...待续~

　　总结： android下 1.不能存在两个初始化的video,会报错 2.没有用户主动触发行为，play()执行是无效的，但在该视频在已经被播放的情况下是可以不用用户主动触发直接Play()是可以的(必须是已经播放过，即使初始化完成，直接Play()也是不行的)。

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

H5平面设计怎么提升

现在H5广告非常的热门，而平面设计师必须要想方法提升自己了，今天总结一下平面设计的一些自我提升的经验。

H5平面设计师该有哪些转变？

写在前面的话，因为互联网行业的介入，很多行业的一贯法则都发生了变化，比如零售、金融、地产、汽车、通讯、旅游等等……平面设计师作为各行业中比较下游的一个岗位，不管是被客户上司逼被还是平日的潜移默化，其实也多少受到互联网的影响，感知风向起步较早的一批甚至已经蜕变到了移动端的设计师，任职于大型互联网企业UIUE，这里暂且不表。