162 lines
4.0 KiB
HTML
162 lines
4.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Title</title>
|
||
|
|
</head>
|
||
|
|
<link rel="stylesheet" href="./plyr/plyr.css"/>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.plyr {
|
||
|
|
--plyr-control-icon-size: 5vmin;
|
||
|
|
--plyr-font-size-time: 4.5vmin;
|
||
|
|
|
||
|
|
.plyr__time + .plyr__time {
|
||
|
|
display: block !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#player {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
<video id="player" playsinline controls data-poster="" style="width: 100vw">
|
||
|
|
<source src="" type="video/mp4"/>
|
||
|
|
</video>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script src="./js/hybrid_html_uni.webview.1.5.5.js"></script>
|
||
|
|
<script src="./plyr/plyr.js"></script>
|
||
|
|
<script src="./hls/hls.js"></script>
|
||
|
|
<script>
|
||
|
|
let player = null
|
||
|
|
let hls = null
|
||
|
|
let currentTimeTimer = null
|
||
|
|
let isSeekEnd = false
|
||
|
|
let src = ''
|
||
|
|
let playTime = ''
|
||
|
|
let poster = ''
|
||
|
|
let isProgress = false
|
||
|
|
|
||
|
|
function setCurrentTime(type) {
|
||
|
|
currentTimeTimer && clearTimeout(currentTimeTimer);
|
||
|
|
currentTimeTimer = setTimeout(() => {
|
||
|
|
player.currentTime = playTime;
|
||
|
|
// 如果初始没有设置上开始播放时间，递归调用直到设置上为止
|
||
|
|
if (type === "ready" && !isSeekEnd && Math.abs(player.currentTime - playTime) > 2) {
|
||
|
|
setCurrentTime(type);
|
||
|
|
}
|
||
|
|
}, 500);
|
||
|
|
}
|
||
|
|
|
||
|
|
function initVideo() {
|
||
|
|
const video = document.querySelector("#player")
|
||
|
|
video.setAttribute('data-poster', src)
|
||
|
|
video.setAttribute('src', src)
|
||
|
|
video.querySelector('source').setAttribute('src', poster)
|
||
|
|
const controls = [
|
||
|
|
"play-large",
|
||
|
|
"play",
|
||
|
|
"current-time",
|
||
|
|
"duration",
|
||
|
|
"mute",
|
||
|
|
"volume",
|
||
|
|
"captions",
|
||
|
|
"fullscreen",
|
||
|
|
]
|
||
|
|
isProgress === '1' && controls.splice(2, 0, 'progress')
|
||
|
|
player = new Plyr(video, {
|
||
|
|
type: "",
|
||
|
|
autoplay: true,
|
||
|
|
controls,
|
||
|
|
seekTime: 0,
|
||
|
|
ratio: "16:9",
|
||
|
|
speed: {selected: 1, options: [1]},
|
||
|
|
});
|
||
|
|
if (src.includes('.m3u8')) {
|
||
|
|
hls = new Hls();
|
||
|
|
hls.loadSource(src);
|
||
|
|
hls.attachMedia(video);
|
||
|
|
}
|
||
|
|
player.play();
|
||
|
|
player.on("ready", () => {
|
||
|
|
setCurrentTime("ready")
|
||
|
|
document.title = JSON.stringify({
|
||
|
|
eventName: 'ready',
|
||
|
|
currentTime: player ? player.currentTime : ''
|
||
|
|
})
|
||
|
|
});
|
||
|
|
player.on("seeking", () => {
|
||
|
|
isSeekEnd = false;
|
||
|
|
document.title = JSON.stringify({
|
||
|
|
eventName: 'seeking',
|
||
|
|
currentTime: player ? player.currentTime : ''
|
||
|
|
})
|
||
|
|
});
|
||
|
|
player.on("seeked", () => {
|
||
|
|
isSeekEnd = true;
|
||
|
|
document.title = JSON.stringify({
|
||
|
|
eventName: 'seeked',
|
||
|
|
currentTime: player ? player.currentTime : ''
|
||
|
|
})
|
||
|
|
});
|
||
|
|
player.on("play", () => {
|
||
|
|
document.title = JSON.stringify({
|
||
|
|
eventName: 'play',
|
||
|
|
currentTime: player ? player.currentTime : ''
|
||
|
|
})
|
||
|
|
});
|
||
|
|
player.on("pause", () => {
|
||
|
|
document.title = JSON.stringify({
|
||
|
|
eventName: 'pause',
|
||
|
|
currentTime: player ? player.currentTime : ''
|
||
|
|
})
|
||
|
|
});
|
||
|
|
player.on("ended", () => {
|
||
|
|
document.title = JSON.stringify({
|
||
|
|
eventName: 'ended',
|
||
|
|
currentTime: player ? player.currentTime : ''
|
||
|
|
})
|
||
|
|
});
|
||
|
|
player.on("timeupdate", () => {
|
||
|
|
if (player.currentTime - playTime > 5) {
|
||
|
|
playTime = player.currentTime;
|
||
|
|
document.title = JSON.stringify({
|
||
|
|
eventName: 'timeupdate',
|
||
|
|
currentTime: player ? player.currentTime : ''
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('UniAppJSBridgeReady', function () {
|
||
|
|
const data = plus.webview.getWebviewById("video")
|
||
|
|
src = data.src
|
||
|
|
poster = data.poster
|
||
|
|
playTime = +data.playTime
|
||
|
|
isProgress = data.isProgress
|
||
|
|
initVideo()
|
||
|
|
});
|
||
|
|
|
||
|
|
function htmlMessage(event) {
|
||
|
|
if (player) {
|
||
|
|
switch (event) {
|
||
|
|
case 'fullscreen.exit':
|
||
|
|
player.fullscreen.active && player.fullscreen.exit()
|
||
|
|
break
|
||
|
|
default:
|
||
|
|
player[event]()
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</html>
|