如何控制html视频的鼠标滚动

How to control html videos by mouse scroll?

本文关键字：视频 鼠标 滚动 html 何控制 控制      更新时间：2023-09-26

我必须在我的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>

和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>

您可能希望使用"mousewheel"事件而不是"scroll"事件。"scroll"事件只在视口实际移动时触发。

这里有一个jsFiddle来查看滚动部分的操作http://jsfiddle.net/33m33/.

我认为这个脚本应该做你需要的，尽管你可能需要做一些修改:

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;
}
相关文章：