<!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.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]},
});
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>