You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
189 lines
5.8 KiB
189 lines
5.8 KiB
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
|
<style>
|
|
body {
|
|
background-color: #000;
|
|
cursor: none;
|
|
/*background-image: url(/images/bg.png);*/
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: auto;
|
|
}
|
|
|
|
video {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.box {
|
|
position: absolute;
|
|
width: 220px;
|
|
height: 120px;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
margin: auto;
|
|
background-color: #f8f0f0;
|
|
color: #333;
|
|
border: 1px solid #d3b2b2;
|
|
border-radius: 5px;
|
|
z-index: 1000;
|
|
display: none;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.box .info {
|
|
position: relative;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.info.volume {
|
|
background: url(images/volume.png) center center no-repeat;
|
|
}
|
|
|
|
.box .line {
|
|
position: relative;
|
|
width: 200px;
|
|
margin: 0 auto;
|
|
border-bottom: 2px solid #999;
|
|
}
|
|
|
|
.line .point {
|
|
position: absolute;
|
|
top: -5px;
|
|
width: 0;
|
|
height: 0;
|
|
border: 5px solid #999;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<video id="player" preload="none" poster="/images/bg.png"></video>
|
|
<div id="vol" class="box">
|
|
<div class="info volume"></div>
|
|
<div class="line">
|
|
<div class="point"></div>
|
|
</div>
|
|
</div>
|
|
<div id="time" class="box">
|
|
<div class="info">00:00:00</div>
|
|
<div class="line">
|
|
<div class="point"></div>
|
|
</div>
|
|
</div>
|
|
<script src="/lib/signalr/dist/browser/signalr.min.js"></script>
|
|
<script>
|
|
function getTime(seconds) {
|
|
var result = '';
|
|
if (seconds > 3600) {
|
|
result += lp(Math.floor(seconds / 3600)) + ':';
|
|
seconds = seconds % 3600;
|
|
}
|
|
if (seconds > 60) {
|
|
result += lp(Math.floor(seconds / 60)) + ':';
|
|
seconds = Math.floor(seconds % 60);
|
|
}
|
|
result += lp(Math.floor(seconds));
|
|
return result;
|
|
}
|
|
function lp(num) {
|
|
return num < 10 ? '0' + num : num;
|
|
}
|
|
</script>
|
|
<script>
|
|
var debug = true;
|
|
var player = document.getElementById('player');
|
|
var vtimer;
|
|
var stimer;
|
|
player.volume = 0.5;
|
|
player.onended = function () {
|
|
player.play();
|
|
};
|
|
function onvolumechange() {
|
|
var vol = document.getElementById('vol');
|
|
vol.style.display = 'block';
|
|
document.querySelector('#vol .point').style.left = (player.volume * 100).toFixed() + '%';
|
|
clearTimeout(vtimer);
|
|
vtimer = setTimeout(function () {
|
|
vol.style.display = 'none';
|
|
if (debug) { console.log('hide vol box'); }
|
|
}, 2000);
|
|
};
|
|
function onseek() {
|
|
var time = document.getElementById('time');
|
|
time.style.display = 'block';
|
|
document.querySelector('#time .info').innerHTML = getTime(player.currentTime);
|
|
document.querySelector('#time .point').style.left = (player.currentTime / player.duration * 100).toFixed() + '%';
|
|
clearTimeout(stimer);
|
|
stimer = setTimeout(function () {
|
|
time.style.display = 'none';
|
|
if (debug) { console.log('hide seek box'); }
|
|
}, 2000);
|
|
};
|
|
var wsUrl = '/hub';
|
|
const connection = new signalR.HubConnectionBuilder()
|
|
.withUrl(wsUrl)
|
|
.build();
|
|
function connect() {
|
|
if (debug) { console.log('start connect to server:' + Date()); }
|
|
connection.start().then(function () {
|
|
|
|
}).catch(function (err) {
|
|
console.error(err.toString());
|
|
setTimeout(connect, 15 * 1000);
|
|
});
|
|
}
|
|
connection.on("command", function (command, args) {
|
|
if (debug) { console.log(command + ':' + args); }
|
|
if (command == "play") {
|
|
var src = "/upload/" + args + ".mp4?timestamp=" + new Date().getTime();
|
|
if (player.src && player.paused && player.src.substr(player.src.length - src.length) == src) {
|
|
player.play();
|
|
}
|
|
else {
|
|
player.src = src;
|
|
player.play();
|
|
}
|
|
}
|
|
if (command == "pause") {
|
|
player.pause();
|
|
}
|
|
if (command == "stop") {
|
|
player.src = '';
|
|
}
|
|
if (command == "si") {
|
|
player.currentTime += 10;
|
|
onseek();
|
|
}
|
|
if (command == "sd") {
|
|
player.currentTime -= 10;
|
|
onseek();
|
|
}
|
|
if (command == "vi") {
|
|
player.volume = player.volume + 0.1 < 1 ? player.volume + 0.1 : 1;
|
|
onvolumechange();
|
|
}
|
|
if (command == "vd") {
|
|
player.volume = player.volume - 0.1 > 0 ? player.volume - 0.1 : 0;
|
|
onvolumechange();
|
|
}
|
|
});
|
|
connection.onclose(function (err) {
|
|
console.error(err);
|
|
setTimeout(connect, 15 * 1000);
|
|
});
|
|
setTimeout(connect, 0);
|
|
</script>
|
|
</body>
|
|
</html> |