Refactor video playback handling for active slides and improve mute functionality
This commit is contained in:
@@ -1807,40 +1807,36 @@ const SlideCreator = {
|
|||||||
style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;"
|
style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;"
|
||||||
};
|
};
|
||||||
|
|
||||||
if (STATE.slideshow.isMuted) {
|
|
||||||
videoAttributes.muted = "";
|
videoAttributes.muted = "";
|
||||||
}
|
|
||||||
|
|
||||||
backdrop = SlideUtils.createElement("video", videoAttributes);
|
backdrop = SlideUtils.createElement("video", videoAttributes);
|
||||||
|
|
||||||
if (!STATE.slideshow.isMuted) {
|
|
||||||
backdrop.volume = 0.4;
|
backdrop.volume = 0.4;
|
||||||
}
|
|
||||||
|
|
||||||
STATE.slideshow.videoPlayers[itemId] = backdrop;
|
STATE.slideshow.videoPlayers[itemId] = backdrop;
|
||||||
|
|
||||||
backdrop.addEventListener('play', () => {
|
backdrop.addEventListener('play', (event) => {
|
||||||
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||||
// backdrop.addEventListener('play', (event) => {
|
if (!slide || !slide.classList.contains('active')) {
|
||||||
// const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
console.log(`Local video ${itemId} started playing but slide is not active, pausing.`);
|
||||||
|
event.target.pause();
|
||||||
// if (!slide || !slide.classList.contains('active')) {
|
event.target.currentTime = 0;
|
||||||
// console.log(`Local video ${itemId} started playing but is not active, pausing.`);
|
return;
|
||||||
// event.target.pause();
|
}
|
||||||
// event.target.currentTime = 0;
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
|
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
|
||||||
STATE.slideshow.slideInterval.stop();
|
STATE.slideshow.slideInterval.stop();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
backdrop.addEventListener('ended', () => {
|
backdrop.addEventListener('ended', () => {
|
||||||
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||||
|
if (slide && slide.classList.contains('active')) {
|
||||||
SlideshowManager.nextSlide();
|
SlideshowManager.nextSlide();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
backdrop.addEventListener('error', () => {
|
backdrop.addEventListener('error', () => {
|
||||||
if (CONFIG.waitForTrailerToEnd) {
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||||
|
if (CONFIG.waitForTrailerToEnd && slide && slide.classList.contains('active')) {
|
||||||
SlideshowManager.nextSlide();
|
SlideshowManager.nextSlide();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -2314,14 +2310,22 @@ const SlideshowManager = {
|
|||||||
|
|
||||||
// Manage Video Playback: Stop others, Play current
|
// Manage Video Playback: Stop others, Play current
|
||||||
|
|
||||||
// 1. Stop all other YouTube players
|
// 1. Stop all other YouTube players and local video elements
|
||||||
if (STATE.slideshow.videoPlayers) {
|
if (STATE.slideshow.videoPlayers) {
|
||||||
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
|
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
|
||||||
if (id !== currentItemId) {
|
if (id !== currentItemId) {
|
||||||
const p = STATE.slideshow.videoPlayers[id];
|
const p = STATE.slideshow.videoPlayers[id];
|
||||||
if (p && typeof p.pauseVideo === 'function') {
|
if (!p) return;
|
||||||
|
// YouTube player
|
||||||
|
if (typeof p.pauseVideo === 'function') {
|
||||||
p.pauseVideo();
|
p.pauseVideo();
|
||||||
}
|
}
|
||||||
|
// HTML5 <video> element (local trailers)
|
||||||
|
if (p instanceof HTMLVideoElement) {
|
||||||
|
p.pause();
|
||||||
|
p.muted = true;
|
||||||
|
p.currentTime = 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user