时间戳

首页 > 解决方案 > 是否可以让视频对滚动做出反应？

javascript - 是否可以让视频对滚动做出反应？

问题描述

我正在为我的平面设计学士学位做一个网络活动，我的一个想法需要比我目前拥有的更多的编程知识。我的问题如下：

是否有某种代码可以根据滚动来使视频向前和向后播放？我找到了多种在滚动时播放和暂停的方法，但这不是我想要的。我希望用户能够向后和向前滚动“浏览”视频。

另外，用最少的编程知识很难实现吗？我目前了解 HTML 和 CSS 的原理，并且可以在没有帮助的情况下编辑代码，但我不太擅长从头开始实际将所有内容组合在一起。我对 javascript 没有任何经验。

我希望我能让自己理解，这不完全是我的专业领域。

谢谢！

标签： javascript

解决方案

我如何在评论中提到您可以根据鼠标滚轮事件设置视频“currentTime”：

var video = document.getElementById('video');

$(window).bind('mousewheel DOMMouseScroll', function(event){
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
       video.currentTime += 5;
    }
    else {
       video.currentTime -= 5;
    }
});
video{
    height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="video" controls="controls">
	<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
	<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
	<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>

目前没有方法可以反转播放视频。

推荐阅读