如何通过鼠标滚动控制html视频? [英] How to control html videos by mouse scroll?

问题描述

我必须在我的 HTML 页面上实现视频标签.我在视频标签中包含了一个视频，但是如果我向上滚动视频应该向前滚动我已经滚动了多少如果我向下滚动视频应该向后并且它应该玩，我试过这样.

和 html 是

 
<video id="one" width="480" height="600" 自动播放循环控件 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>您需要支持 HTML5 的浏览器才能观看此视频.</视频>

解决方案

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

这是一个 jsFiddle，用于查看滚动部分http://jsfiddle.net/33m33/.

我认为这个脚本应该可以满足您的需求，但您可能需要进行一些修改:

var video = $('#one').get(0);var 增量 = 2;//每个滚动事件步进两秒var videoReady = false;//当视频加载时设置为truevar 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)));//+1 或 -1更新视频(增量 * 增量)；}返回假；});});功能更新视频(增量){var videoLength = video.duration;var videoPosition = (video.currentTime + delta > videoLength) ?videoLength : ((video.currentTime + delta <0) ? 0 : video.currentTime + delta);video.currentTime = videoPosition;}

I have to implement videos tags on my HTML page.i have included one video in video tag but if i scroll up the video should be forward how much i have scrolled and if i scroll down the video should be backward and it should play.i have tried like this.

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

and html is

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

解决方案

You will probably want to use the "mousewheel" event instead of the "scroll" event. The "scroll" event only fires when the viewport actually moves.

Here's a jsFiddle to see the scrolling portion in action http://jsfiddle.net/33m33/.

I think this script should do what you're needing, though you may need to make a couple of modifications:

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

这篇关于如何通过鼠标滚动控制html视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！