Flèche de la chronologie vidéo et cliquez sur

Question

Je suis nouveau à GSAP et j'essaye d'activer le glissement et de cliquer sur la chronologie vidéo html5 personnalisée avec GSAP. J'ai lu quelques messages sur le forum GSAP mais il y a quelque chose que je ne peux évidemment pas comprendre ...

J'ai reproduit un exemple simplifié sur la jsFiddle suivante: https://jsfiddle.net/epigeyre/oLmk6b0d/2/

Je crée mon draggable élément d'un élément stocké dans une variable, lié à son conteneur (qui est le conteneur de timeline), puis ajoutez ma fonction onDrag (je suppose que le clic sera le même). La progression de la chronologie est montrée par un div dans le conteneur chronologique qui est mis à l'échelle sur un axe X de 0 à 1. Je pense que le lien avec l'heure vidéo actuelle est correct mais pas l'animation (je ne comprends pas pourquoi une traduction est appliquée ...).

Voici cet extrait spécifique:

Draggable.create(timelineProgress, { 
    type:'x', 
    bounds: timeline, // My timeline container 
    onDrag: function() { 
    video.currentTime = this.x/this.maxX * video.duration; 
    TweenLite.set(timelineProgress, { scaleX: this.x/this.maxX }) ; 
    }, 
    onClick: function() { 
    video.currentTime = this.x/this.maxX * video.duration; 
    TweenLite.set(timelineProgress, { scaleX: this.x/this.maxX }) ; 
    } 
}); 

Pourriez-vous me aider à comprendre ce qui se passe? Merci beaucoup pour votre aide!

Answer 1

Très bien alors voici la solution pour ceux qui ont besoin de construire un lecteur vidéo personnalisé. En utilisant GSAP vous avez une propriété trigger vraiment intéressante dans le plugin Draggable.

Voici comment je l'ai fait fonctionner pour un montage vidéo HTML5.

var video = document.getElementsByTagName('video')[0], 
 
    play = document.getElementsByClassName('video__play')[0], 
 
    timeline = document.getElementsByClassName('timeline')[0], 
 
    timelineProgress = document.getElementsByClassName('timeline__progress')[0], 
 
    drag = document.getElementsByClassName('timeline__drag')[0]; 
 

 
// Toggle Play/Pause 
 
play.addEventListener('click', togglePlay, false); 
 

 
function togglePlay() { 
 
    if (video.paused) { 
 
    video.play(); 
 
    } else { 
 
    video.pause(); 
 
    } 
 
} 
 

 
// on interaction with video controls 
 
video.onplay = function() { 
 
    TweenMax.ticker.addEventListener('tick', vidUpdate); 
 
}; 
 
video.onpause = function() { 
 
\t TweenMax.ticker.removeEventListener('tick', vidUpdate); 
 
}; 
 
video.onended = function() { 
 
\t TweenMax.ticker.removeEventListener('tick', vidUpdate); 
 
}; 
 

 
// Sync the timeline with the video duration 
 
function vidUpdate() { 
 
    TweenMax.set(timelineProgress, { 
 
    scaleX: (video.currentTime/video.duration).toFixed(5) 
 
    }); 
 
    TweenMax.set(drag, { 
 
    x: (video.currentTime/video.duration * timeline.offsetWidth).toFixed(4) 
 
    }); 
 
} 
 

 
// Make the timeline draggable 
 
Draggable.create(drag, { 
 
    type: 'x', 
 
    trigger: timeline, 
 
    bounds: timeline, 
 
    onPress: function(e) { 
 
    video.currentTime = this.x/this.maxX * video.duration; 
 
    TweenMax.set(this.target, { 
 
     x: this.pointerX - timeline.getBoundingClientRect().left 
 
    }); 
 
    this.update(); 
 
    var progress = this.x/timeline.offsetWidth; 
 
    TweenMax.set(timelineProgress, { 
 
     scaleX: progress 
 
    }); 
 
    }, 
 
    onDrag: function() { 
 
    video.currentTime = this.x/this.maxX * video.duration; 
 
    var progress = this.x/timeline.offsetWidth; 
 
    TweenMax.set(timelineProgress, { 
 
     scaleX: progress 
 
    }); 
 
    }, 
 
    onRelease: function(e) { 
 
    e.preventDefault(); 
 
    } 
 
});

video { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.timeline { 
 
    width: 100%; 
 
    height: 10px; 
 
    background-color: black; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 

 
/* Here is the dragger that I will use to move the video 
 
* current time forward or backward. 
 
* I have added a background color for you to see it 
 
* but just remove it in production. 
 
*/ 
 

 
.timeline__drag { 
 
    width: 1px; 
 
    height: 20px; 
 
    top: -10px; 
 
    background-color: yellow; 
 
    position: absolute; 
 
    z-index: 2; 
 
    transform-origin: 0 0; 
 
} 
 

 
.timeline__progress { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: green; 
 
    transform: scaleX(0); 
 
    transform-origin: 0 0; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
button { 
 
    margin-top: 2em; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.0/utils/Draggable.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.0/TweenMax.min.js"></script> 
 

 
<video> 
 
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"> 
 
</video> 
 
<div class="timeline"> 
 
    <div class="timeline__drag"></div> 
 
    <span class="timeline__progress"></span> 
 
</div> 
 
<button class="video__play">Play/Pause video</button>

je dois Carl grâce du forum GSAP pour son aide merveilleuse!