seeseemelk/vivaplusdl
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Implement custom video controls with play/pause and seek functionality

Browse Source
This commit is contained in:
Sebastiaan de Schaetzen 2025-06-17 09:50:42 +02:00
parent d2c1384a92
commit 3857171bdb
1 changed files with 79 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
static/index.html
View File

@ -116,6 +116,41 @@
#video-overlay-container #back-button.button-hidden {
opacity: 0; /* Class to hide the button */
}
#custom-video-controls {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
z-index: 1; /* Above video, but below back button if it were in the same direct stacking context */
opacity: 1;
transition: opacity 0.3s ease-in-out;
box-sizing: border-box;
}
#custom-video-controls.controls-hidden {
opacity: 0;
}
#custom-play-pause-button {
background: none;
border: none;
color: white;
font-size: 1.5em; /* Adjust size as needed */
cursor: pointer;
padding: 5px 10px;
margin-right: 10px;
}
#custom-seek-bar {
flex-grow: 1;
cursor: pointer;
accent-color: #3498db; /* Optional: color for the seek bar thumb and progress */
}
</style>
<script>
function hideLoader() {
@ -146,7 +181,7 @@
let overlayContainer = $("<div id='video-overlay-container'></div>").appendTo("body");
// Create video element and append to container
let videoElement = $("<video controls autoplay class='video-player'></video>")
let videoElement = $("<video autoplay class='video-player'></video>") // Removed 'controls' attribute
.attr("src", currentVideo.url)
.appendTo(overlayContainer)[0];
@ -154,22 +189,61 @@
let backButton = $("<button id='back-button'>Back</button>")
.appendTo(overlayContainer);
// Mouse inactivity logic for back button
// Create custom video controls container
let customControls = $("<div id='custom-video-controls'></div>").appendTo(overlayContainer);
let playPauseButton = $("<button id='custom-play-pause-button'>❚❚</button>").appendTo(customControls); // Initial state: Pause icon
let seekBar = $("<input type='range' id='custom-seek-bar' value='0' />").appendTo(customControls);
// Mouse inactivity logic for back button, controls, and cursor
let inactivityTimer;
function showButtonAndResetTimer() {
function showControlsAndResetTimer() {
backButton.removeClass('button-hidden');
customControls.removeClass('controls-hidden');
overlayContainer.css('cursor', 'default'); // Show cursor
clearTimeout(inactivityTimer);
inactivityTimer = setTimeout(function() {
backButton.addClass('button-hidden');
customControls.addClass('controls-hidden');
overlayContainer.css('cursor', 'none'); // Hide cursor
}, 3000); // 3 seconds
}
overlayContainer.on('mousemove.inactivityControls', function() {
showButtonAndResetTimer();
showControlsAndResetTimer();
});
showButtonAndResetTimer(); // Initial call to show and start timer
showControlsAndResetTimer(); // Initial call
// Custom Controls Logic
// Play/Pause Button
playPauseButton.click(function() {
if (videoElement.paused) {
videoElement.play();
} else {
videoElement.pause();
}
});
$(videoElement).on('play', function() {
playPauseButton.text('❚❚'); // Pause icon
});
$(videoElement).on('pause', function() {
playPauseButton.text('►'); // Play icon
});
// Seek Bar
$(videoElement).on('loadedmetadata', function() {
seekBar.attr('max', videoElement.duration);
});
$(videoElement).on('timeupdate', function() {
seekBar.val(videoElement.currentTime);
// Optional: Update seek bar background to show progress
const percentage = (videoElement.currentTime / videoElement.duration) * 100;
seekBar.css('background', `linear-gradient(to right, #3498db ${percentage}%, #555 ${percentage}%)`);
});
seekBar.on('input', function() {
videoElement.currentTime = $(this).val();
});
// Request fullscreen on the container
const containerEl = overlayContainer[0];