backup

js_workshop8/index.js

@@ -0,0 +1,75 @@
+
+class VideoPlayer {
+    constructor( video ) {
+        this.fullscreenStatus = false;
+        this.video = document.getElementById("video");
+        this.playerContainer = document.getElementById("playerContainer");
+        this.pausePlayBtn = document.getElementById("pauseplay");
+        this.volBar = document.getElementById("volBar");
+        this.volIco = document.getElementById('volIco')
+        this.fullscreenBtn = document.getElementById('fullscreen');
+        this.elapsed = document.getElementById('durationElapsed');
+        this.total = document.getElementById('durationTotal');
+        this.trackBar = document.getElementById("trackBar");
+    }
+    init() {
+        this.pausePlayBtn.innerHTML = '\u23F5\uFE0E';
+        this.fullscreenBtn.innerHTML = '\u26F6\uFE0E'
+        this.volIco.innerHTML = '\u266A\uFE0E'
+        this.total.innerHTML =
+            Math.floor(this.video.duration % 3600 / 60).toString().padStart(2,'0') + ":" +
+            Math.floor(this.video.duration % 60).toString().padStart(2,'0');
+        this.elapsed.innerHTML = "0:00";
+        this.pausePlayBtn.addEventListener('click', ( event ) => player.pausePlay( event.target.innerHTML ) );
+        this.volBar.addEventListener( "change", ( event )=> player.changeVol( event.currentTarget.value ) );
+        this.fullscreenBtn.addEventListener( 'click', () => player.fullscreen( player.playerContainer ) );
+    }
+    updateTrackbar() {
+        this.trackBar.style.width = parseInt(( this.video.currentTime / this.video.duration ) * 100 ) + "%";
+        this.elapsed.innerHTML =
+            Math.floor(this.video.currentTime % 3600 / 60).toString().padStart(2,'0') + ":" +
+            Math.floor(this.video.currentTime % 60).toString().padStart(2,'0');
+    }
+    pausePlay( value ) {
+        switch( value ) {
+            // Play Button
+            case '\u23F5\uFE0E':
+                this.play();
+                break;
+            // Pause Button
+            case '\u23F8\uFE0E':
+                this.pause()
+                break;
+        }
+    };
+    pause() {
+        this.video.pause();
+        this.pausePlayBtn.innerHTML = '\u23F5\uFE0E';
+        this.intervalID = 0;
+    };
+    play() {
+        this.video.play();
+        this.pausePlayBtn.innerHTML = '\u23F8\uFE0E';
+        this.intervalID = window.setInterval(() => this.updateTrackbar(), 500)
+    };
+    changeVol( newVolume ) {
+        this.video.volume = newVolume / 100;
+    }
+    fullscreen( element ) {
+        if( this.fullscreenStatus === false ) {
+            element.requestFullscreen({navigationUI:'show'}).catch((e) => {
+                alert(`Could not enter fullscreen: ${e.message} (${e.name})`);
+            });
+            this.fullscreenStatus = true;
+        }
+        else {
+            document.exitFullscreen().catch((e) => {
+                alert(`Could not exit fullscreen: ${e.message} (${e.name})`);
+            });
+            this.fullscreenStatus = false;
+        }
+    }
+}
+
+let player = new VideoPlayer();
+player.init();