130 lines
4.0 KiB
HTML
Executable File
130 lines
4.0 KiB
HTML
Executable File
<html>
|
|
|
|
<head>
|
|
<link href="/source/video-js.css" rel="stylesheet" />
|
|
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
|
<script src="/source/videojs-ie8.min.js"></script>
|
|
<style>
|
|
html {
|
|
background-color: #111;
|
|
}
|
|
body {
|
|
color: #ddd;
|
|
max-width: 100%;
|
|
height: 800px;
|
|
}
|
|
body * {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
body > div > form {
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
<script>
|
|
function http(method, remote, callback, body) {
|
|
var xmlhttp = new XMLHttpRequest();
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
|
|
callback(xmlhttp.responseText, xmlhttp.status)
|
|
}
|
|
};
|
|
xmlhttp.open(method, remote, true);
|
|
if (typeof body == "undefined") {
|
|
body = null
|
|
}
|
|
xmlhttp.send(body);
|
|
}
|
|
function changeTo(f) {
|
|
function callback(responseBody, responseStatus) {
|
|
console.log("http ", address, "from", f.custom.value, " vs ", f.source[f.source.selectedIndex].value)
|
|
}
|
|
let address = f.custom.value
|
|
if (!address)
|
|
address = f.source[f.source.selectedIndex].value
|
|
console.log("http ", address, "from", f.custom.value, " vs ", f.source[f.source.selectedIndex].value)
|
|
http(
|
|
"post",
|
|
"/player/set",
|
|
callback,
|
|
JSON.stringify(
|
|
{
|
|
"address": address
|
|
}
|
|
),
|
|
)
|
|
}
|
|
function seekTo(f) {
|
|
let ts = f.ts.value
|
|
if (ts.match(/^[0-9]{2}:[0-9]{2}$/))
|
|
ts = "00:" + ts
|
|
function callback(responseBody, responseStatus) {console.log(ts, responseStatus, responseBody)}
|
|
http("post", "/player/seek", callback, JSON.stringify({"ts": ts}))
|
|
}
|
|
function pause(f) {
|
|
function callback(responseBody, responseStatus) {console.log(responseStatus, responseBody)}
|
|
http("post", "/player/pause", callback, JSON.stringify({}))
|
|
}
|
|
function resume(f) {
|
|
function callback(responseBody, responseStatus) {console.log(responseStatus, responseBody)}
|
|
http("post", "/player/resume", callback, JSON.stringify({}))
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<div>
|
|
<form action="#" method="post" onsubmit="changeTo(this); return false;">
|
|
<select name="source">
|
|
<option value="192.168.0.83:8554">play room</option>
|
|
<option value="192.168.0.96:8554">living room</option>
|
|
<option value="192.168.0.97:8554">basement</option>
|
|
<option value="192.168.0.98:8554">garage</option>
|
|
</select>
|
|
<input type="text" name="custom"/>
|
|
<input type="submit"/>
|
|
</form>
|
|
|
|
<div style="display:inline-block; min-width: 1em;"></div>
|
|
|
|
<form action="#" method="post" onsubmit="pause(this); return false;">
|
|
<input value="pause" type="submit"/>
|
|
</form>
|
|
|
|
<form action="#" method="post" onsubmit="resume(this); return false;">
|
|
<input value="resume" type="submit"/>
|
|
</form>
|
|
|
|
<div style="display:inline-block; min-width: 1em;"></div>
|
|
|
|
<form action="#" method="post" onsubmit="seekTo(this); return false;">
|
|
<label for="ts">Like '[hh:]mm:ss'</label>
|
|
<input type="text" pattern="^[0-9]{2}:[0-9]{2}(:[0-9]{2})?$" name="ts"/>
|
|
<input type="submit"/>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<body>
|
|
<video
|
|
id="my-video"
|
|
class="video-js"
|
|
controls
|
|
preload="auto"
|
|
width="auto"
|
|
height="auto"
|
|
poster="MY_VIDEO_POSTER.jpg"
|
|
data-setup='{"liveui": true}'
|
|
autoplay
|
|
>
|
|
<source src="/stream/test.m3u8" />
|
|
<p class="vjs-no-js">
|
|
To view this video please enable JavaScript, and consider upgrading to a
|
|
web browser that
|
|
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
|
|
</p>
|
|
</video>
|
|
<script src="/source/video.js"></script>
|
|
</body>
|
|
|
|
</html>
|