update videoplayer

This commit is contained in:
Adam Reňak 2024-11-03 16:15:03 +01:00
parent fd254627cb
commit ed5d89a7b7

View File

@ -5,11 +5,10 @@ const translateLettersBtn = document.getElementById('translateLettersBtn');
const prevBtn = document.getElementById('prevBtn'); const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn'); const nextBtn = document.getElementById('nextBtn');
let videoSequence = []; // Array to store video paths let videoSequence = [];
let currentIndex = 0; // Track the current video index let currentIndex = 0;
let autoPlayEnabled = true; // Flag for autoplay let autoPlayEnabled = true;
// Helper function to check if a video file exists
function videoExists(src) { function videoExists(src) {
return new Promise(resolve => { return new Promise(resolve => {
const video = document.createElement('video'); const video = document.createElement('video');
@ -19,9 +18,8 @@ function videoExists(src) {
}); });
} }
// Function to load video sequence based on words
async function loadVideoSequenceByWords() { async function loadVideoSequenceByWords() {
const words = inputText.value.trim().split(' '); // Split input into words const words = inputText.value.trim().split(' ');
videoSequence = []; videoSequence = [];
for (const word of words) { for (const word of words) {
@ -33,13 +31,11 @@ async function loadVideoSequenceByWords() {
currentIndex = 0; currentIndex = 0;
} }
// Function to load video sequence based on letters
async function loadVideoSequenceByLetters() { async function loadVideoSequenceByLetters() {
const characters = inputText.value.trim().split(''); // Split input into characters const characters = inputText.value.trim().split('');
videoSequence = []; videoSequence = [];
for (const char of characters) { for (const char of characters) {
// Skip spaces and punctuation
if (/[a-zA-Z]/.test(char)) { if (/[a-zA-Z]/.test(char)) {
const videoSrc = `video/pismena/${char.toLowerCase()}.mp4`; const videoSrc = `video/pismena/${char.toLowerCase()}.mp4`;
if (await videoExists(videoSrc)) { if (await videoExists(videoSrc)) {
@ -50,10 +46,8 @@ async function loadVideoSequenceByLetters() {
currentIndex = 0; currentIndex = 0;
} }
// Function to play video at the specified index
function playVideoAtIndex(index) { function playVideoAtIndex(index) {
if (index < 0 || index >= videoSequence.length) return; if (index < 0 || index >= videoSequence.length) return;
videoPlayer.src = videoSequence[index]; videoPlayer.src = videoSequence[index];
videoPlayer.play(); videoPlayer.play();
currentIndex = index; currentIndex = index;
@ -72,7 +66,6 @@ function playVideoAtIndex(index) {
} }
} }
// Event listener for the "Preložiť po slovách" button
translateWordsBtn.addEventListener('click', async () => { translateWordsBtn.addEventListener('click', async () => {
autoPlayEnabled = true; autoPlayEnabled = true;
await loadVideoSequenceByWords(); await loadVideoSequenceByWords();
@ -81,7 +74,6 @@ translateWordsBtn.addEventListener('click', async () => {
} }
}); });
// Event listener for the "Preložiť po písmenách" button
translateLettersBtn.addEventListener('click', async () => { translateLettersBtn.addEventListener('click', async () => {
autoPlayEnabled = true; autoPlayEnabled = true;
await loadVideoSequenceByLetters(); await loadVideoSequenceByLetters();
@ -90,7 +82,6 @@ translateLettersBtn.addEventListener('click', async () => {
} }
}); });
// Event listeners for "Previous" and "Next" buttons
prevBtn.addEventListener('click', () => { prevBtn.addEventListener('click', () => {
if (currentIndex > 0) { if (currentIndex > 0) {
autoPlayEnabled = false; autoPlayEnabled = false;
@ -108,3 +99,15 @@ nextBtn.addEventListener('click', () => {
}); });
function hideControls() {
if (!videoPlayer.matches(':hover')) {
videoPlayer.controls = false;
}
requestAnimationFrame(hideControls);
}
videoPlayer.addEventListener('mouseenter', () => {
videoPlayer.controls = true;
});
hideControls();