mirror of
https://github.com/langhuihui/monibuca.git
synced 2025-12-24 13:48:04 +08:00
69 lines
1.8 KiB
HTML
69 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title></title>
|
|
</head>
|
|
<body>
|
|
<script src="hls.js"></script>
|
|
<video id="video" controls></video>
|
|
<script>
|
|
function parseQuery(queryString) {
|
|
var query = {};
|
|
var pairs = (
|
|
queryString[0] === '?' ? queryString.slice(1) : queryString
|
|
).split('&');
|
|
for (var i = 0; i < pairs.length; i++) {
|
|
var pair = pairs[i].split('=');
|
|
query[decodeURIComponent(pair[0])] = decodeURIComponent(
|
|
pair[1] || ''
|
|
);
|
|
}
|
|
return query;
|
|
}
|
|
|
|
/* get stream from query string */
|
|
function getParameterByName(name) {
|
|
var query = parseQuery(window.location.search);
|
|
return query.hasOwnProperty(name) ? query[name] : undefined;
|
|
}
|
|
|
|
var stream =
|
|
getParameterByName('stream') ||
|
|
'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
|
|
</script>
|
|
<script>
|
|
if (Hls.isSupported()) {
|
|
var video = document.getElementById('video');
|
|
var hls = new Hls();
|
|
hls.loadSource(stream);
|
|
hls.attachMedia(video);
|
|
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
|
|
video.muted = true;
|
|
video.play();
|
|
});
|
|
}
|
|
</script>
|
|
<script>
|
|
var video = document.getElementById('video');
|
|
window.onload = function () {
|
|
var i = 0;
|
|
var el = document.getElementById('update');
|
|
function foo() {
|
|
i++;
|
|
el.innerHTML =
|
|
'animation:' +
|
|
i +
|
|
',decoded:' +
|
|
video.webkitDecodedFrameCount +
|
|
',dropped:' +
|
|
video.webkitDroppedFrameCount;
|
|
window.requestAnimationFrame(foo);
|
|
}
|
|
foo();
|
|
};
|
|
</script>
|
|
<div id="update"></div>
|
|
</body>
|
|
</html>
|