add video player

static/main.js

@@ -19,6 +19,37 @@ async function formClick(ev) {
     }
 }
 
+function moveBar(e, bar, vid) {
+    let rect = bar.getBoundingClientRect();
+    let prog = ((e.pageX - rect.x) / rect.width);
+    
+    vid.currentTime = prog * vid.duration;
+}
+
+function prog(vid, bar) {
+    bar.querySelector('div').style.width = `${vid.currentTime / vid.duration * 100}%`;
+}
+
+function controls(vid) {
+    let bar = vid.querySelector('#progressbar');
+    let video = vid.querySelector('video');
+
+    video.onclick = () => {
+        if (video.paused) {
+            video.play();
+            return;
+        }
+        video.pause();
+    }
+
+    bar.onclick = (e) => moveBar(e, bar, video);
+
+    video.addEventListener('timeupdate', () => prog(video,bar));
+}
+
 window.onload = function () {
     document.addEventListener('submit', formClick);
+    for (let vid of document.querySelectorAll('#video')) {
+        controls(vid);
+    }
 }