Javascript 如何通过鼠标滚动控制html视频？

我必须在我的HTML页面上实现视频标签。我在视频标签中包含了一个视频，但如果我向上滚动视频，则视频应该向前滚动多少，如果向下滚动视频，则视频应该向后滚动并播放。我已经尝试过这样做

 <script type="text/javascript">
    function updateVideo() {
        var video = $('#one').get(0);
        var videoLength = video.duration;
        var scrollPosition = $(document).scrollTop();
        video.currentTime = (scrollPosition / ($(document).height() - $(window).height())) * videoLength;//(scrollPosition / SCROLL_SCRUB_SPEED) % videoLength;
    }

    $(window).scroll(function(e) {
             if(videoReady && continueUpdatingVideo) { updateVideo(); }
     });


</script>

函数updateVideo（）{
var video=$（'#一'）.get（0）；
var videoLength=video.duration；
var scrollPosition=$（document.scrollTop（）；
video.currentTime=（scrollPosition/（$（document.height（）-$（window.height（））*videoLength；/（scrollPosition/SCROLL\u SCRUB\u SPEED）%videoLength；
}
$（窗口）。滚动（功能（e）{
如果（videoReady&&ContinueUpdategVideo）{updateVideo（）；}
});

html是

 <div class="container">
    <video id="one" width="480" height="600" autoplay loop controls class="hello">
            <source type="video/mp4" src="https://d3mlfyygrfdi2i.cloudfront.net/fd77/team_04022013_b_v4.mp4"></source>
            <source  type="video/webm" src="https://d3mlfyygrfdi2i.cloudfront.net/c943/team_04022013_b_v4.webm" ></source>
            You need an HTML5 capable browser to view this video.
    </video>
</div>

您需要一个支持HTML5的浏览器来查看此视频。

您可能希望使用“鼠标滚轮”事件而不是“滚动”事件。“滚动”事件仅在视口实际移动时触发

下面是一个JSFIDLE，可以看到滚动部分的作用

我认为这个脚本应该满足您的需要，尽管您可能需要做一些修改：

var video = $('#one').get(0);
var increments = 2; //steps two seconds for each scroll event
var videoReady = false; //set to true when video loads
var continueUpdatingVideo = false;

$(document).ready(function(){
  $('#one').bind('DOMMouseScroll mousewheel', function(e){
      e.preventDefault();

      if(videoReady && continueUpdatingVideo) {
        var delta = Math.max(-1, Math.min(1, (e.originalEvent.wheelDelta || -e.originalEvent.detail))); //either +1 or -1
        updateVideo(delta * increments);
      }

      return false;
  });
});

function updateVideo(delta) {
  var videoLength = video.duration;
  var videoPosition = (video.currentTime + delta > videoLength) ? videoLength : ((video.currentTime + delta < 0) ? 0 : video.currentTime + delta);
  video.currentTime = videoPosition;
}

var-video=$（'#一'）.get（0）；
var增量=2//对于每个滚动事件，请执行两秒钟的步骤
var videoReady=false//加载视频时设置为true
var continueUpdategVideo=假；
$（文档）.ready（函数（）{
$（'#one'）.bind（'DOMMouseScroll mousewheel'，函数（e）{
e、 预防默认值（）；
if（视频就绪和继续更新视频（&C）{
var delta=Math.max（-1，Math.min（1，（e.originalEvent.wheelDelta | | |-e.originalEvent.detail））；//要么+1要么-1
更新版本（增量*增量）；
}
返回false；
});
});
函数updateVideo（增量）{
var videoLength=video.duration；
变量videoPosition=（video.currentTime+delta>videoLength）？videoLength:（（video.currentTime+delta<0）？0:video.currentTime+delta）；
video.currentTime=视频位置；
}

那么问题出在哪里？您能否尝试重新编写问题，以便更清楚地了解这种方法存在哪些问题？