76 lines
2.9 KiB
JavaScript
76 lines
2.9 KiB
JavaScript
|
|
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();
|