update videoplayer
This commit is contained in:
parent
fd254627cb
commit
ed5d89a7b7
@ -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();
|
||||||
|
Loading…
Reference in New Issue
Block a user