视频时间轴拖动和点击

Question

我是GSAP的新手，我试图启用拖动功能并点击自定义html5视频时间轴与GSAP。我看过一对夫妇在GSAP论坛的帖子，但有件事我显然无法理解......

我复制以下的jsfiddle一个简单的例子：https://jsfiddle.net/epigeyre/oLmk6b0d/2/

所以我创造我拖动元素从一个变量中存储的元素，绑定到它的容器（这是时间轴容器），然后添加我的函数onDrag（我猜，点击将是相同的）。时间轴的进度由时间轴容器内的一个div显示，该容器在X轴上从0缩放到1。我认为链接到当前视频时间是可以的，但动画不是（我不明白为什么应用翻译...）。

下面是具体的代码段：

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 }) ; 
    } 
}); 

你能帮我明白这是怎么回事？ 非常感谢您的帮助！

Answer 1

好吧，这里为那些需要建立定制视频播放器的解决方案。使用GSAP，你在Draggable插件中有一个非常有趣的trigger属性。

下面是我如何使它适用于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>

我要感谢GSAP论坛的卡尔对他的精彩的帮助！