移动端H5视频页面坑之总结

最近刚做了一个移动端页面，大致功能是原生app分享出来到各大平台的视频页面，做的过程中遇到的问题总结如下：
布局篇

问题1. 页面需要兼容主流手机，主流手机又有不同版本，怎么做到呢？各种sf，百度 最后选定了一种简单暴力效果挺不错的方案：

;(function (doc, win, undefined) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (clientWidth === undefined) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
        if (doc.addEventListener === undefined) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window);

这段代码应该都不陌生，css使用就是rem单位，就这样搞帕拉帕拉写了布局，自己也在模拟不同手机下看了一下，咦，还不错。突然把模拟手机取消，pc端看了一下。。。这没法看啊，怎么这么这么大大大！！！只好屈服于它加个判断：

if(clientWidth>=640){
    docEl.style.fontSize = '35px';
 }else{
     docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
 }

大于640的宽度后，设固定值。

js篇：

问题2.产品大大给页面的一个按钮增加了如下需求：本地有app就直接打开，没有app引导用户到下载地址。
拿到需求后，我一脸懵逼，哎，继续sf，百度：看了好几个博文，都得到不完美的解决方案，知乎的2选一，大大说不能改布局了。最后产品大大把网易新闻的给我看了一下，sf看了一下，发现里面有ajax的请求，需要这么麻烦麽，后来妥协了：

var hasApp = true;
        var t1 = Date.now();
        var ifr = document.createElement('iframe');
        if(is_weixn()){
            $('#dl-hint').show();
            $('body').css("overflow", "hidden");
            stopScroll = true;
            return;
        }else if(browser.versions.ios){
            window.location.href="ios://";//打开ios应用     
//          ifr.src = 'ios://';//打开ios应用            
        }else if(browser.versions.android){
            ifr.src = 'and://';//打开android应用
        }       
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        window.setTimeout(function() {
            document.body.removeChild(ifr);
            var t2 = Date.now();
            if (!t1 || t2 - t1 < 500) {
                hasApp = false;
            }
        }, 480);
        window.setTimeout(function() {
            if (!hasApp){
                var realAddr = new StringBuilder(), source, resultAddr;
                realAddr.append(download_addr).append("?flag=".concat(i));
                realAddr.append("&source=".concat(j));
                resultAddr = realAddr.toString();
                if (is_weibo()) {
                    // 微博可以直接打开下载链接
                    window.open(resultAddr);
                } else {
                    window.open(resultAddr);
                }
            }               
        }, 1000);

问题3.前端ajax请求到数据后，渲染一个视频列表，数据有 id，url，title，img，等 ，渲染简单，我点击列表某个视频需要播放，这时需要拿到当前视频的url，title，img数据。解决方案用到了 自定义data ，点击后获取当前节点的dataset属性 。此方法简单易懂！哦了

问题4.获取视频数据里的标题 并js动态修改title，嗯，这个嘛

 document.title = "这里是视频的标题";

安卓机上没有一点儿问题，ios的Safari里看了一下，咦，怎么是域名？哦，原来是Safari特有，不能改，ios下微信扫一扫，页面出来 怎么title是空白？！百度，sf go。哦，原来真有这个坑，ios微信下不能动态监听title的值，找解决方法呗。

    document.title = title;
    var mobile = navigator.userAgent.toLowerCase();
    if (/iphone|ipad|ipod/.test(mobile)) {
       var iframe = document.createElement('iframe');
       iframe.style.visibility = 'hidden';
       iframe.setAttribute('src', '/favicon.ico');
       var iframeCallback = function() {            
           setTimeout(function() {
               iframe.removeEventListener('load', iframeCallback);
               document.body.removeChild(iframe);
           }, 0);
       };
       iframe.addEventListener('load', iframeCallback);
       document.body.appendChild(iframe);
      }

微信会自动跳转iframe 这个坑，需要把src设置为无效链接。

问题5.视频播放量计数，需求：该视频播放时间大于n秒 算一次播放量。
查询视频api发现有个 监听视频播放时间：timeupdate 事件

var myVideo = document.getElementById('videoId');//获取video元素
myVideo.addEventListener('timeupdate',function(){
    // code
    console.log(myVideo.currentTime);
}

时间大于3秒，当前时间 myVideo.currentTime >3

var myVideo = document.getElementById('videoId');//获取video元素
myVideo.addEventListener('timeupdate',function(){
   if(myVideo.currentTime > 3){
       // 请求接口code
   }
}

测试发现视频播放时间大于3后一直请求接口存在重复计数，解决方法加标识

if(myVideo.currentTime >= 3 && flag == true){
    // 请求接口code         
    if(code==200){
        flag = false;
    }               
}

问题6.对于微信里不能直接打开app，下载地址，妥协做成引导用户操作在”浏览器中“打开。