video-sync-thing/index.html

76 lines
1.6 KiB
HTML

<video id="v" controls muted style="max-width: 100%; max-height: 100%" onclick="undefined">
<source id="s" />
</video>
<br /><button onclick="socket.emit('reqpos')">sync position</button> <button onclick="socket.emit('syncme')">resync all</button>
<script src="/socket.io/socket.io.min.js"></script>
<script>
var video = document.getElementById("v");
var source = document.getElementById("s");
onclick = () => video.muted = false;
var socket = io({ transports: ["websocket"] });
socket.emit("syncme");
socket.on("media", file => {
source.src = file;
video.load();
});
socket.on("pos", seek);
socket.on("play", play);
socket.on("pause", play);
//socket.on("end", () => console.log("end"));
// detect human-caused events and ignore echo from server
video.onseeked = () => {
socket.off("pos", seek);
socket.once("pos", () => socket.on("pos", seek));
socket.emit("c_pos", video.currentTime * 1000);
};
video.onpause = () => {
socket.off("pause", pause);
socket.once("pause", () => socket.on("pause", pause));
socket.emit("c_pause");
}
video.onplay = () => {
socket.off("play", play);
socket.once("play", () => socket.on("play", play));
socket.emit("c_play");
};
// programatic play/pause/seek without triggering event listeners
function play() {
var e = video.onplay;
video.onplay = () => video.onplay = e;
video.play();
}
function pause() {
var e = video.onpause;
video.onpause = () => video.onpause = e;
video.pause();
}
function seek(time) {
var e = video.onseeked;
video.onseeked = () => video.onseeked = e;
video.currentTime = time / 1000;
}
</script>