【前端开发】移动端video视频兼容全屏插件教程

其他 2019-12-30 12:34:09 阅读次数: 0

话不多说直接上demo：

html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>videojs视频播放DEMO</title>
        <link rel="stylesheet" href="css/video.css">
    </head>
    <body>
        <video class="ppq-video video-hidden" style="object-fit: cover; " 
            src="https://qnvideo.mijwed.com/xitie/swqgb9m3ysjl/tVjbOx1ZfUCBITn1577438949231.mp4" 
            webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-playsinline 
            poster="https://qnvideo.mijwed.com/xitie/swqgb9m3ysjl/tVjbOx1ZfUCBITn1577438949231.mp4?vframe/jpg/offset/1|imageView2/1/w/375/h/667" 
            id="myvideo">
        </video>

        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/screenfull.js"></script>
        <script src="js/video.js"></script>

        <script>
            setTimeout(() => {
                $('#myvideo').initVideoPlayer();
            }, 1500);
        </script>
    </body>

</html>

css：

@charset "UTF-8";

html {
    font-size: 14px;
}

body, h1, h2, h3, h4, h5, h6, p, img, dl, dd, ol, ul, form, th, td, figure, figcaption {
    margin: 0;
    padding: 0;
    border: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

body {
    word-wrap: break-word;
    word-break: break-all;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.ppq-video-player .play-btn {
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
    cursor: pointer;
}

.ppq-video-player .play-btn button {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 10px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    display: inline-block;
    border: 0 none;
    text-align: center;
    font-size: 0;
    cursor: pointer;
    box-sizing: border-box;
}

.ppq-video-player .play-btn span {
    display: block;
    width: 40px;
    height: 40px;
}

.ppq-video-player .play-btn svg {
    fill: #fff;
    width: 100%;
    height: 100%;
}

video::-webkit-media-controls {
    display: none !important
}

video::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none !important;
    appearance: none !important
}

video::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none !important;
    appearance: none !important
}

video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
    appearance: none !important
}

/*.ppq-video-player {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56%;
    overflow: hidden;
    background: #000
}*/

.ppq-video-player .screen-box {
     position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.ppq-video {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.video-hidden {
    width: 0;
    height: 0;
    overflow: hidden;
}

.ppq-video-player .tool-box {
    display: none;
    z-index: 10;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 48px;
    background: 0 0;
    -webkit-transition: all .5s;
    transition: all .5s
}

.ppq-video-player .tool-box:before {
    content: ' ';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 48px;
    pointer-events: none;
    background: rgba(0, 0, 0, .5);
    -webkit-transition: all .5s;
    transition: all .5s
}

.ppq-video-player .player-bar {
    position: relative;
    margin: 22px 89.5px 0 83.5px;
    height: 4px;
    background: rgba(255, 255, 255, .3);
    -webkit-transition: all .5s;
    transition: all .5s
}

.ppq-video-player .player-bar-loaded {
    position: absolute;
    height: 4px;
    width: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#3d94ff), to(#3de1ff));
    background-image: -webkit-linear-gradient(left, #3d94ff 0, #3de1ff 100%);
    background-image: linear-gradient(to right, #3d94ff 0, #3de1ff 100%);
    min-width: 3%;
    max-width: 98%
}

.ppq-video-player .player-bar-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    top: -8px;
    background: 0 0;
    opacity: 1;
    -webkit-transition: all .5s;
    transition: all .5s
}

.ppq-video-player .player-bar-dot:after {
    content: ' ';
    display: block;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 12px;
    margin: 4px 0 0 4px
}

.ppq-video-player .play-pause-btn {
    position: absolute;
    width: 40px;
    height: 48px;
    left: 0;
    top: 0;
    opacity: 1;
    -webkit-transition: all .5s;
    transition: all .5s
}

.ppq-video-player .play-pause-btn:before {
    content: ' ';
    display: block;
    margin: 16px 0 0 17px
}

.ppq-video-player .play-pause-btn.playing:before {
    background-position: 0 0;
    width: 16px;
    height: 16px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAXElEQVQ4T2NkoBAwgvT///9fioGB4QIDA4MoknmKjIyMDwjJwwywZGBgOIbmGEtGRsYTUANwyo8awHhiNAyGVRgoMjAw3EPKC68ZGBgMGRkZn0LzAk55cDqgBAAArImOEZ6usYsAAAAASUVORK5CYII=);
}

.ppq-video-player .play-pause-btn.paused:before {
    background-position: 0 0;
    width: 16px;
    height: 16px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAqklEQVQ4T8XTPQ5BQRSG4ffdlnWoRYcGnQUoNRSELbAHlUrQqxV3AxKNGLlyJxGR6/4UpjyZ75nMmTkChBCawAY4AB31lNaLLDNgBvSzwANYAiP1+guJwALofWxOgKG6zkPygJjbAm318g0qAqS5GzAGJur9HSoKxMwZaKn7WCgLvHoOzNOmq6EKEA/vqqu/ALWuULmJtZ6x8kcq9ZWnwKDOMDWAHXAsO85PeChkEQFQUtAAAAAASUVORK5CYII=);
}

.ppq-video-player .player-enlarge-btn {
    position: absolute;
    width: 40px;
    height: 48px;
    right: 0;
    top: 0;
    opacity: 1;
    -webkit-transition: all .5s;
    transition: all .5s
}

.ppq-video-player .player-enlarge-btn:before {
    content: ' ';
    display: block;
    margin: 16px 0 0 7px;
    background-position: 0 0;
    width: 16px;
    height: 16px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAAAaUlEQVQ4T2P8////SgYGhjAGVGDEyMh4Hk2M4f///38YGBiYkcTvMzIyKjFS2xBPRkbGHei2Y+P///9fmIGB4Q0DAwOGSwbYEGKcT0gNIyEFxMiPGoIZSsgpdoDTCVLeoYpLkD1L/1wMAHO/ZBE/6w2hAAAAAElFTkSuQmCC);
}

.ppq-video-player .player-time-duration, .ppq-video-player .player-time-current {
    position: absolute;
    top: 0;
    color: #fff;
    font-size: 20px;
    -webkit-transform: scale(.5);
    -ms-transform: scale(.5);
    transform: scale(.5);
    line-height: 48px;
    opacity: 1;
    -webkit-transition: all .5s;
    transition: all .5s
}

.ppq-video-player .player-time-current {
    left: 37px
}

.ppq-video-player .player-time-duration {
    right: 39px
}

.ppq-video-player .tool-box-hide {
    height: 0;
    -webkit-transition: all .5s;
    transition: all .5s
}

.ppq-video-player .tool-box-hide .player-bar {
    margin: 0;
    -webkit-transition: all .5s;
    transition: all .5s
}

.ppq-video-player .tool-box-hide .player-enlarge-btn, .ppq-video-player .tool-box-hide .play-pause-btn, .ppq-video-player .tool-box-hide .player-bar-dot, .ppq-video-player .tool-box-hide .player-time-duration, .ppq-video-player .tool-box-hide .player-time-current {
    opacity: 0;
    -webkit-transition: all .5s;
    transition: all .5s
}

.ppq-video-player .tool-box-hide:before {
    bottom: 0px;
    -webkit-transition: all .5s;
    transition: all .5s
}

@-webkit-keyframes loading {
    from {
        -webkit-transform: rotate(0deg) translateZ(0);
    }

    to {
        -webkit-transform: rotate(360deg) translateZ(0);
    }

}

@keyframes loading {
    from {
        transform: rotate(0deg) translateZ(0);
    }

    to {
        transform: rotate(360deg) translateZ(0);
    }

}

.ppq-video-player .player-loading {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: rotate(0deg) translateZ(0);
    transform: rotate(0deg) translateZ(0);
    width: 68px;
    height: 68px;
    margin-left: -34px;
    margin-top: -34px;
    text-indent: -999em;
    background: url("https://files.mijwed.com/xitie/default_mijwed/load.gif");
    background-size: contain;
    background-position: 0 0;
    -webkit-animation: loading 1.2s linear infinite;
    animation: loading 1.2s linear infinite;
}

js：

screenfull.js

! function () {
    "use strict";
    var e = "undefined" != typeof window && void 0 !== window.document ? window.document : {}, n = "undefined" !=
            typeof module && module.exports,
        l = "undefined" != typeof Element && "ALLOW_KEYBOARD_INPUT" in Element,
        r = function () {
            for (var n, l = [["requestFullscreen", "exitFullscreen", "fullscreenElement", "fullscreenEnabled",
                            "fullscreenchange", "fullscreenerror"], ["webkitRequestFullscreen", "webkitExitFullscreen",
                            "webkitFullscreenElement", "webkitFullscreenEnabled", "webkitfullscreenchange",
                            "webkitfullscreenerror"], ["webkitRequestFullScreen", "webkitCancelFullScreen",
                            "webkitCurrentFullScreenElement", "webkitCancelFullScreen", "webkitfullscreenchange",
                            "webkitfullscreenerror"], ["mozRequestFullScreen", "mozCancelFullScreen",
                            "mozFullScreenElement", "mozFullScreenEnabled", "mozfullscreenchange", "mozfullscreenerror"], [
                            "msRequestFullscreen", "msExitFullscreen", "msFullscreenElement", "msFullscreenEnabled",
                            "MSFullscreenChange", "MSFullscreenError"]], r = 0, t = l.length, u = {}; r < t; r++) if ((
                    n = l[r]) && n[1] in e) {
                    for (r = 0; r < n.length; r++) u[l[0][r]] = n[r];
                    return u
                }
            return !1
        }(),
        t = {
            change: r.fullscreenchange,
            error: r.fullscreenerror
        }, u = {
            request: function (n) {
                var t = r.requestFullscreen;
                n = n || e.documentElement, /5\.1[.\d]* Safari/.test(navigator.userAgent) ? n[t]() : n[t](l && Element.ALLOW_KEYBOARD_INPUT)
            },
            exit: function () {
                e[r.exitFullscreen]()
            },
            toggle: function (e) {
                this.isFullscreen ? this.exit() : this.request(e)
            },
            onchange: function (e) {
                this.on("change", e)
            },
            onerror: function (e) {
                this.on("error", e)
            },
            on: function (n, l) {
                var r = t[n];
                r && e.addEventListener(r, l, !1)
            },
            off: function (n, l) {
                var r = t[n];
                r && e.off(r, l, !1)
            },
            raw: r
        };
    return r ? (Object.defineProperties(u, {
        isFullscreen: {
            get: function () {
                return Boolean(e[r.fullscreenElement])
            }
        },
        element: {
            enumerable: !0,
            get: function () {
                return e[r.fullscreenElement]
            }
        },
        enabled: {
            enumerable: !0,
            get: function () {
                return Boolean(e[r.fullscreenEnabled])
            }
        }
    }), void(n ? module.exports = u : window.screenfull = u)) : void(n ? module.exports = !1 : window.screenfull = !1)
}();

video.js

/*!
 * videoPlayer v1.0.1 ~ Copyright (c) 2018 Xzavier, https://github.com/xiaohuazheng/videoplayer
 * Released under MIT license
 */
! function(e, n, i, t) {
    var a = navigator.userAgent,
        o = "ontouchstart" in n,
        d = o ? "touchstart" : "mousedown",
        l = o ? "touchmove" : "mousemove",
        r = o ? "touchend" : "mouseup",
        s = o ? "touchcancel" : "mouseup";

    function u(e) {
        var n = Math.floor(e / 60),
            i = Math.floor(e - 60 * n);
        return(n < 10 ? "0" + n : n) + ":" + (i < 10 ? "0" + i : i)
    }

    function c(e) {
        if(!e) return !1;
        var n = i.createElement("video");
        if("function" != typeof n.canPlayType) return !1;
        var t = n.canPlayType("video/" + e.split(".").pop().toLowerCase());
        return "probably" === t || "maybe" === t
    }

    function p() {

        i.exitFullscreen ? "" : i.mozCancelFullScreen ? i.mozCancelFullScreen() : i.webkitCancelFullScreen && i.webkitCancelFullScreen()
//        i.exitFullscreen ? i.exitFullscreen() : i.mozCancelFullScreen ? i.mozCancelFullScreen() : i.webkitCancelFullScreen && i.webkitCancelFullScreen()
    
    }
    e.fn.initVideoPlayer = function() {
        return this.each(function() {
            if("video" === e(this).prop("tagName").toLowerCase()) {
                var n = e(this),
                    t = n.attr("src"),
                    v = !1;
                if(c(t) ? v = !0 : n.find("source").each(function() {
                        if(c(e(this).attr("src"))) return v = !0, !1
                    }), v) {
                    var h = e('<div class="ppq-video-player"><div class="screen-box">' + e("<div>").append(n.eq(0).clone()).html() + "</div></div>"),
                        f = h.find("video")[0];
                    h.find(".screen-box").append('<span class="player-loading"></span>                <div class="play-btn" style="display: none;">                    <button>                        <span>                            <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 36 36"><path d="M11,10 L18,13.74 18,22.28 11,26 Z M18,13.74 L26,18 26,18 18,22.28 Z"></path></svg>                        </span>                    </button>                </div>'), h.append('<div class="tool-box tool-box-hide">                <div class="play-pause-btn paused"></div>                <div class="player-time-current">00:00</div>                <div class="player-time-duration">00:00</div>                <div class="player-enlarge-btn"></div>                <div class="player-bar">                    <div class="player-bar-loaded">                        <span class="player-bar-dot"></span>                    </div>                </div>            </div>');
                    var m = null,
                        y = h.find(".ppq-video"),
                        b = h.find(".play-pause-btn"),
                        w = h.find(".play-btn"),
                        C = h.find(".player-loading"),
                        x = h.find(".tool-box"),
                        g = h.find(".player-time-current"),
                        F = h.find(".player-time-duration"),
                        k = h.find(".player-bar-loaded"),
                        E = h.find(".player-bar"),
                        L = h.find(".player-enlarge-btn");
                    h.find(".player-bar-dot");
                    F.html("&hellip;"), f.addEventListener("playing", function() {
                        y.show(), b.removeClass("paused").addClass("playing"), w.hide(), C.hide(), e.isNumeric(f.duration) && F.text(u(f.duration)), S()
                    }), f.addEventListener("ended", function() {
                        p(),b.removeClass("playing").addClass("paused"), w.show(), C.hide()
                    }), f.addEventListener("pause", function() {
                        y.show(), w.show(), C.hide()
                    }), f.addEventListener("loadeddata", function() {
                        e.isNumeric(f.duration) && F.text(u(f.duration))
                    }), f.addEventListener("durationchange", function() {
                        e.isNumeric(f.duration) && F.text(u(f.duration))
                    }), f.addEventListener("timeupdate", function() {
                        g.text(u(f.currentTime));
                        var e = f.currentTime / f.duration * 100;
                        e = e > 100 ? 100 : e < 0 ? 0 : e, k.width(e + "%")
                    }), f.addEventListener("webkitendfullscreen", function() {
                        !0 === f.paused && (y.hide(), w.show(), b.removeClass("playing").addClass("paused"))
                    }), setTimeout(function() {
                        y.removeClass("video-hidden"), C.hide(), w.show()
                    }, 1e3), h.on("click", function(e) {
                        S(e)
                    }), w.on("click", function() {
                        f.play(), y.show(), w.hide(), C.hide()
                    }), b.on("click", function(e) {
                        b.hasClass("playing") ? (f.pause(), b.removeClass("playing").addClass("paused")) : (f.play(), b.removeClass("paused").addClass("playing"))
                    }), L.on("click", function() {
                        i.webkitIsFullScreen ? p() : a.match(/android/i) && a.indexOf("Chrome") > -1 ? screenfull.request(h[0]) : f.requestFullscreen ? f.requestFullscreen() : f.webkitEnterFullScreen ? f.webkitEnterFullScreen() : f.mozRequestFullScreen ? f.mozRequestFullScreen() : f.webkitRequestFullScreen && f.webkitRequestFullScreen()
                    }), E.on(d, function(e) {
                        var n = 0,
                            i = function(e) {
                                var i = o ? event.changedTouches[0] : e,
                                    t = (i.clientX - E.offset().left) / E.width();
                                n = (n = 100 * t) > 100 ? 100 : n < 0 ? 0 : n, k.width(n + "%"), f.currentTime = t * f.duration
                            };
                        i(e), E.on(l, function(e) {
                            w.hide(), C.show(), i(e)
                        }), E.on(r, function(e) {
                            C.hide(), n < 100 && f.play()
                        })
                    }).on(s, function() {
                        E.unbind(l)
                    }), n.replaceWith(h), "h5" === y.attr("x5-video-player-type") && a.match(/android/i) && a.indexOf("MQQBrowser") > -1 && L.hide()
                }
            }

            function S(e) {
                e && e.target && "VIDEO" === e.target.nodeName && !x.hasClass("tool-box-hide") ? x.addClass("tool-box-hide") : x.removeClass("tool-box-hide"), clearTimeout(m), m = setTimeout(function() {
                    x.addClass("tool-box-hide")
                }, 2e3)
            }
        }), this
    }
}(jQuery, window, document);

jq就不贴出来了，就是这么简单，搞定！

猜你喜欢

转载自www.cnblogs.com/xiaohuizhang/p/12119013.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022