aesthetic.computer
Monorepo for Aesthetic.Computer
aesthetic.computer
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>Screenplay - video-sync:parent</title>
6 <style>
7 body {
8 margin: 0;
9 background: black;
10 overflow: hidden;
11 cursor: none;
12 }
13 </style>
14</head>
15
16<body>
17 <video id="video" preload muted src="/boot/screenplay.mp4"
18 style="width: 100%; height: 100%; object-fit: fill;"></video>
19 <script>
20 const video = document.getElementById('video');
21 video.addEventListener('canplaythrough', () => {
22 const ws = new WebSocket('ws://localhost:8080');
23 ws.onmessage = (event) => {
24 if (event.data === 'play') {
25 video.play();
26 } else if (event.data === 'restart') {
27 video.currentTime = 0;
28 video.play();
29 }
30 };
31 ws.onopen = () => { ws.send('start'); };
32 video.addEventListener('ended', () => { ws.send('restart'); });
33 });
34 </script>
35</body>
36
37</html>