话不多说直接上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("…"), 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就不贴出来了,就是这么简单,搞定!
来源:oschina
链接:https://my.oschina.net/u/4394481/blog/3321809