@@ -32,7 +32,7 @@ function AddControls() {
`
- video.insertAdjacentHTML("afterend", add_controls);
+ video.insertAdjacentHTML("afterend", add_controls)
video.setAttribute("oncontextmenu", "return false")
}
@@ -66,7 +66,7 @@ function Util() {
}
// Fullscreen
- const Button_Fullscreen = document.getElementById('fullscreen');
+ const Button_Fullscreen = document.getElementById('fullscreen')
function Toggle_Fullscreen() {
if (document.fullscreenElement) {document.exitFullscreen()}
else if (document.webkitFullscreenElement) {document.webkitExitFullscreen()}
@@ -74,7 +74,7 @@ function Util() {
else {videoContainer.requestFullscreen()}
}
- Button_Fullscreen.onclick = Toggle_Fullscreen;
+ Button_Fullscreen.onclick = Toggle_Fullscreen
function Update_FullscreenButton() {
if (document.fullscreenElement) {
Button_Fullscreen.setAttribute('data-title', 'Exit full screen (f)')
@@ -85,7 +85,7 @@ function Util() {
}
}
- videoContainer.addEventListener('fullscreenchange', Update_FullscreenButton);
+ videoContainer.addEventListener('fullscreenchange', Update_FullscreenButton)
// Skip Back or Forth
const Button_SkipBack = document.querySelector('.plyx-player-controls #skip-back')
@@ -98,7 +98,7 @@ function Util() {
function Toggle_SkipForth() {Skip(10)}
function Skip(value) {
- video.currentTime += value;
+ video.currentTime += value
}
// Volume (Also the slider)
@@ -129,11 +129,11 @@ function Util() {
video.addEventListener('volumechange', Update_Volume_Icon)
function Toggle_Mute() {
- video.muted = !video.muted;
+ video.muted = !video.muted
if (video.muted) {
volume.setAttribute('data-volume', volume.value)
- volume.value = 0;
+ volume.value = 0
} else {
volume.value = volume.dataset.volume
}
@@ -142,33 +142,37 @@ function Util() {
// Keyboard Shortcuts
function keyboardShortcuts(event) {
- const { key } = event;
+ const { key } = event
switch(key) {
case 'k':
- Toggle_PlayPause();
+ Toggle_PlayPause()
if (video.paused) {
- Show_Controls();
+ Show_Controls()
} else {
setTimeout(() => {
- Hide_Controls();
- }, 2000);
+ Hide_Controls()
+ }, 1200)
}
- break;
+ break
case 'm':
- Toggle_Mute();
- break;
+ Toggle_Mute()
+ break
case 'f':
- Toggle_Fullscreen();
- break;
+ Toggle_Fullscreen()
+ break
case 'j':
- Toggle_SkipBack();
- break;
+ Toggle_SkipBack()
+ break
case 'l':
- Toggle_SkipForth();
- break;
+ Toggle_SkipForth()
+ break
}
}
- document.addEventListener('keyup', keyboardShortcuts);
+ document.addEventListener('keyup', keyboardShortcuts)
+
+ // Other Controls
+ /// Double click (Toggle Fullscreen)
+ video.addEventListener('dblclick', () => {Toggle_Fullscreen()})
// Auto Hide Controls
function Hide_Controls() {
@@ -190,23 +194,23 @@ function Util() {
var mouseTimer = null, cursorVisible = true
- function disappearCursor() {
+ function Hide_Cursor() {
mouseTimer = null
- document.body.style.cursor = "none"
+ videoContainer.style.cursor = "none"
cursorVisible = false
Hide_Controls()
}
document.onmousemove = function() {
if (mouseTimer) {
- window.clearTimeout(mouseTimer);
- Show_Controls();
+ window.clearTimeout(mouseTimer)
+ Show_Controls()
}
if (!cursorVisible) {
- document.body.style.cursor = "default"
+ videoContainer.style.cursor = "default"
cursorVisible = true
}
- mouseTimer = window.setTimeout(disappearCursor, 1500)
+ mouseTimer = window.setTimeout(Hide_Cursor, 3200)
}
}