H5全屏视频+暂停交互遇到的坑和解决办法

[xtx1130]

最近做了一个“横屏“H5视频+暂停交互类的项目，遇到了一些小问题，在这里与大家分享一下

• 如果视频需要手机横屏展示，请不要提示用户旋转手机。因为如果用户开启旋转锁变成横屏在安卓下毫无兼容性。解决方案：竖屏手机横屏视频，用rotate把视频旋转。
• 视频在小屏幕浏览器中适配问题。解决方案：通过检测屏幕大小来动态修改viewport

// 代码来源已无从考究，如果有人认领请在博主下面回复
function adaptVP(a) {

    function c() {
        var c, d;
        return b.uWidth = a.uWidth ? a.uWidth : 750, b.dWidth = a.dWidth ? a.dWidth : window.screen.width || window.screen.availWidth, b.ratio = window.devicePixelRatio ? window.devicePixelRatio : 1, b.userAgent = navigator.userAgent, b.bConsole = a.bConsole ? a.bConsole : !1, a.mode ? (b.mode = a.mode, void 0) : (c = b.userAgent.match(/Android/i), c && (b.mode = "android-2.2", d = b.userAgent.match(/Android\s(\d+.\d+)/i), d && (d = parseFloat(d[1])), 2.2 == d || 2.3 == d ? b.mode = "android-2.2" : 4.4 > d ? b.mode = "android-dpi" : d >= 4.4 && (b.mode = b.dWidth > b.uWidth ? "android-dpi" : "android-scale")), void 0)
    }

    function d() {
        var e, f, g, h, c = "",
            d = !1;
        switch (b.mode) {
            case "apple":
                f = (window.screen.availWidth * b.ratio / b.uWidth) / b.ratio;
                c = "width=" + b.uWidth + ",initial-scale=" + f + ",minimum-scale=" + f + ",maximum-scale=" + f + ",user-scalable=no";
                break;
            case "android-2.2":
                a.dWidth || (b.dWidth = 2 == b.ratio ? 720 : 1.5 == b.ratio ? 480 : 1 == b.ratio ? 320 : .75 == b.ratio ? 240 : 480), e = window.screen.width || window.screen.availWidth, 320 == e ? b.dWidth = b.ratio * e : 750 > e && (b.dWidth = e), b.mode = "android-dpi", d = !0;
            case "android-dpi":
                f = 160 * b.uWidth / b.dWidth * b.ratio, c = "target-densitydpi=" + f + ", width=" + b.uWidth + ", user-scalable=no", d && (b.mode = "android-2.2");
                break;
            case "android-scale":
                c = "width=" + b.uWidth + ", user-scalable=no"
        }
        g = document.querySelector("meta[name='viewport']") || document.createElement("meta"), g.name = "viewport", g.content = c, h = document.getElementsByTagName("head"), h.length > 0 && h[0].appendChild(g)
    }

    function e() {
        var a = "";
        for (key in b) a += key + ": " + b[key] + "; ";
        alert(a)
    }

    if (a) {
        var b = {
            uWidth: 0,
            dWidth: 0,
            ratio: 1,
            mode: "apple",
            userAgent: null,
            bConsole: !1
        };
        c(), d(), b.bConsole && e();
    }
};
adaptVP({uWidth: 750});

• 安卓机视频全屏播放问题。解决方案：通过给video添加如下标签实现：

if(!iOS){
    $('video').setAttribute('x5-video-player-type', 'h5');
    $('video').setAttribute('x5-video-player-fullscreen', 'true');
}

• ios低版本playsinline问题。通过https://github.com/bfred-it/iphone-inline-video这个插件可以实现。