车大棒浅谈移动端视频播放闪屏

感谢空调之父

前言

因为工作的原因，好久都没有更新博客。想写一些东西，可是又不知道写什么。码字写博客这个东西，果然像人体的肌肉一样，作为8块腹肌的我现在表示腹肌合并成一块。
但是，这并不能代表什么！作为一个明明可以靠脸吃饭的人，却靠才华去吃饭的人，我表示我依旧很自豪！耶耶！切克闹！

你有freestyle吗？

街边大妈：“哎！小伙子！这墨镜你到底买不买！不买赶紧还给我！”
车大棒："买不起！买不起！还您墨镜......"
言归正传，今天就分享一下自己在处理移动端的遇到一些坑点。

移动端Click 300毫秒延迟

一日接到一个brief，大致就是一个loading引导页面，点击引导页上面按钮之后播放视频。视频播放完之后出现结束页，结束页上面挂着2个按钮一个跳向下载链接，一个指向分享。

项目brief

很好！so，easy！接到这个brief我就马不停蹄的开始干活了，但是很快出现了一个问题。在点击loading页面播放按钮的之后，在loading页切换到视频播放页面会有一个短暂的延迟闪屏问题。这就很尴尬了，刚刚喊的so，easy！这么块就卡住了，打脸未免太快了。（虽然经常被打脸ing）

我表示不服，赶紧上网搜索了一下，移动端click事件，结果发现移动端click事件会有300ms延迟！

这个操作还是头次听说

传说中的双击缩放：
这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。
这当中最出名的，当属双击缩放(double tap to zoom)。这也是会有上述 300 毫秒延迟的主要原因。
双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。
鉴于 iPhone 的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放。几乎现在所有的移动端浏览器都有这个功能。
------来自与Apple公司的一次six、six、six的操作！

解决300ms延迟方案

之后就尝试就上网搜索，解决300ms延迟方案的解决方案。
1、禁用缩放
2、设置 viewport 的 device-width
3、使用指针事件
4、使用 touchend 事件
上述方法都有采用过，但是切换成播放视频的时候依旧会出现闪屏。

不按照套路出牌呀！

难道是300ms延迟的问题没有解决？抓了抓头，然后思索了一会。之后用定时器作了一个监听，然后用 console.log去输出检查结果，结果300ms的问题的确解决了，但是 闪屏的问题却是还是存在的。

loading页面淡入处理

绝望的我坐在小板凳静静的发呆，难道这个浏览器在播放视频的时候本身会有一个延迟效果。因此会导致loading页面与视频衔接的时候会出现一个间断的延迟效果，因此就会出闪屏？

有了这个想法之后，突然灵光一想既然视频本身会有一个延迟。那么我把loading也做一个延迟处理的效果。这样两边都延迟一会，这样就不会出现了闪屏现象了。

于是在CSS代码里面加入一段css代码

@-webkit-keyframes fadeout500 {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

点击播放按钮之后，就给loading页添加一个css类名fadeout500。在Google浏览器模拟手机上面运行，很好没有闪屏问题。

视频监听处理

PC上面模拟器没有问题，高兴的我很快拿起了我的安卓手机开始测试。很好也没有出现闪屏现象，路面畅通，可以随时开车。

开车开到一半的时候，然后看见后台哥哥的iPhone 6 Plus正静静躺在桌子面。于是停下来，打算借后台哥哥的iPhone继续继续开车。当我按下播放视频之后，很快屏幕一闪。

妖兽！居然翻车了！这个闪屏到底是什么鬼呀？

'你在视频播放之后再让loading页面消失就不会出现闪屏了！' 路过的老大看见坐在板凳上抽风的我，淡淡的补充了一句。

‘视频播放在再消失’顺着老大的话语我嘴角跟着念叨一下，然后猛然间所有的思路全部涌现过来了。

闪屏的主因

所有如果我改变思路，点击播放之后先不忙着让loading页面消失，而是控制播放视频。同时对于视频做一个监听事件。
这个时候就得用到html5 相关DOM的事件和属性

音频/视频属性：currentTime（ 蓝色字体指向MDN文档说明）
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）

音频/视频事件： timeupdate
timeupdate 当目前的播放位置已更改时触发。

var  loadingController = function () {
    if (video.currentTime > 0.01) {
        loadingEl.hide(); //loading页消失
    }
}
video.addEventlistener(("timeupdate", loadingController;)

完美的解决，这样也不用还在首页加个什么淡入淡出的效果了，只需要确定视频播在控制loading消失就ok。
对了，为了代码的严谨性，需要在loading消失的事件前面，再加一个事件移出事件监听。
video.removeEventlistener(("timeupdate", loadingController;)

小结：

以上就是我对于移动端视频播放闪屏的处理过程一点胡扯八扯
原创文章，文笔有限，才疏学浅，文中若有不正之处，欢迎各位啪啪的打脸赐教。

我是车大棒，我的目标是星辰与大海！