mirror of
https://github.com/fcwu/docker-ubuntu-vnc-desktop
synced 2025-12-06 08:22:31 +01:00
100 lines
3.1 KiB
HTML
100 lines
3.1 KiB
HTML
<html>
|
|
<head>
|
|
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
<title>video</title>
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
}
|
|
|
|
.mainContainer {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.centeredVideo {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: left;
|
|
}
|
|
|
|
.controls {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="mainContainer" class="mainContainer">
|
|
<video name="videoElement" class="centeredVideo" width="1024" height="576">
|
|
Your browser is too old which doesn't support HTML5 video.
|
|
</video>
|
|
<br>
|
|
</div>
|
|
|
|
<script src="scripts/flv.min.js"></script>
|
|
<script src="scripts/jquery-3.3.1.min.js"></script>
|
|
<script>
|
|
function getParameterByName(name, url) {
|
|
if (!url) {
|
|
url = window.location.href;
|
|
}
|
|
name = name.replace(/[\[\]]/g, "\\$&");
|
|
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
|
|
results = regex.exec(url);
|
|
if (!results) return null;
|
|
if (!results[2]) return '';
|
|
return decodeURIComponent(results[2].replace(/\+/g, " "));
|
|
}
|
|
|
|
$("#mainContainer").css("width", getParameterByName("width"));
|
|
$("#mainContainer").css("height", getParameterByName("height"));
|
|
var url = "../api/live.flv";
|
|
|
|
var flvPlayer;
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
try {
|
|
//flv_load();
|
|
var videoElement = document.getElementsByName('videoElement')[0];
|
|
flvPlayer = flvjs.createPlayer({
|
|
type: 'flv',
|
|
url: url,
|
|
isLive: true,
|
|
withCredentials: true
|
|
}, { isLive: true, enableStashBuffer: false });
|
|
flvPlayer.attachMediaElement(videoElement);
|
|
flvPlayer.load();
|
|
function f() {
|
|
try {
|
|
// flvPlayer.play();
|
|
var playPromise = videoElement.play();
|
|
if (playPromise !== undefined) {
|
|
playPromise.then(_ => {
|
|
console.log("play successfully");
|
|
}).catch(error => {
|
|
// console.log(error);
|
|
setTimeout(f, 10)
|
|
});
|
|
} else {
|
|
// console.log('undefined');
|
|
setTimeout(f, 10)
|
|
}
|
|
} catch (e) { console.log(e); }
|
|
}
|
|
videoElement.addEventListener('canplay', function (e) { setTimeout(f, 0); });
|
|
flvPlayer.on("error", function () {
|
|
window.location.reload();
|
|
});
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|