fix(expertise): attend seeked avant de switcher la vidéo visible
All checks were successful
Deploy / Deploy to Production (push) Successful in 5m25s
All checks were successful
Deploy / Deploy to Production (push) Successful in 5m25s
Le flash venait du fait que isReverse changeait immédiatement après le seek (synchrone), mais le navigateur n'avait pas encore décodé le frame cible. Maintenant on attend l'événement seeked du <video> avant de changer isReverse, garantissant que le bon frame est affiché au moment du switch. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
ff5b0028f1
commit
7838342f96
1 changed files with 26 additions and 29 deletions
|
|
@ -84,43 +84,41 @@
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Switch visuel entre les deux vidéos.
|
||||
* Positionne la vidéo cible au bon frame AVANT de l'afficher
|
||||
* pour éliminer les flashes.
|
||||
*/
|
||||
function switchToForward() {
|
||||
if (!isReverse) return
|
||||
// Positionner forward au bon frame avant de l'afficher
|
||||
if (videoFwd) videoFwd.currentTime = currentFwdTime
|
||||
isReverse = false
|
||||
}
|
||||
|
||||
function switchToReverse() {
|
||||
if (isReverse) return
|
||||
// Positionner reverse au bon frame avant de l'afficher
|
||||
const revPos = videoDuration - currentFwdTime
|
||||
if (videoRev) videoRev.currentTime = revPos
|
||||
isReverse = true
|
||||
}
|
||||
|
||||
function playForward(targetTime) {
|
||||
fwdTarget = targetTime
|
||||
|
||||
if (!isReverse) {
|
||||
// Déjà sur forward : seek + play directement
|
||||
if (videoFwd) videoFwd.currentTime = currentFwdTime
|
||||
videoFwd?.play().catch(() => {})
|
||||
return
|
||||
}
|
||||
|
||||
// Changement de direction : seek forward, attendre seeked, puis switcher
|
||||
if (videoFwd) videoFwd.currentTime = currentFwdTime
|
||||
// Switcher visuellement, puis lancer la lecture
|
||||
switchToForward()
|
||||
videoFwd?.play().catch(() => {})
|
||||
videoFwd?.addEventListener('seeked', () => {
|
||||
isReverse = false // maintenant forward est au bon frame → on l'affiche
|
||||
videoFwd?.play().catch(() => {})
|
||||
}, { once: true })
|
||||
}
|
||||
|
||||
function playReverse(targetFwdPos) {
|
||||
// targetFwdPos = la position forward-équivalente où on veut arriver
|
||||
// On la convertit en position dans la vidéo reverse
|
||||
revTarget = videoDuration - Math.max(targetFwdPos, 0)
|
||||
const revStart = videoDuration - currentFwdTime
|
||||
|
||||
if (isReverse) {
|
||||
// Déjà sur reverse : seek + play directement
|
||||
if (videoRev) videoRev.currentTime = revStart
|
||||
videoRev?.play().catch(() => {})
|
||||
return
|
||||
}
|
||||
|
||||
// Changement de direction : seek reverse, attendre seeked, puis switcher
|
||||
if (videoRev) videoRev.currentTime = revStart
|
||||
// Switcher visuellement, puis lancer la lecture
|
||||
switchToReverse()
|
||||
videoRev?.play().catch(() => {})
|
||||
videoRev?.addEventListener('seeked', () => {
|
||||
isReverse = true // maintenant reverse est au bon frame → on l'affiche
|
||||
videoRev?.play().catch(() => {})
|
||||
}, { once: true })
|
||||
}
|
||||
|
||||
// --- Navigate: move one item up or down (called by composable) ---
|
||||
|
|
@ -322,7 +320,6 @@
|
|||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.expertise-bg video.active {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue