话不多说直接上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; 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("…"), 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就不贴出来了，就是这么简单，搞定！