videoJS平滑音量处理拖动和转换点击问题

时间:2016-08-18 07:06:36

标签: javascript jquery css3 html5-video video.js

我正在使用videoJS插件。我想添加转换到音量条,所以如果有一个点击就有一个转换动画而不是直接从一个地方跳到另一个地方,通过在卷句柄元素上添加一个类就可以轻松实现:

.transition {
-webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

volumeHandle.addClass('transition');

它适用于点击但我想在拖动音量手柄时平滑拖动并且没有任何过渡。我正在修改onMouseMove函数来执行此操作,clean函数是:

vjs.VolumeBar.prototype.onMouseMove = function(event) {
  if (this.player_.muted()) {
    this.player_.muted(false);
  }

  this.player_.volume(this.calculateDistance(event));
};

我正在做类似的事情:

volumeHandle.addClass('transition');
    if(volumeHandle.hasClass('transition')){
        setTimeout(function(){
            volumeHandle.removeClass('transition');
        },250);
    }

我正在使用超时识别来自拖动的点击并且此解决方案可以正常工作,但它没有任何转换,因为超时会使事情变得混乱。如何在没有超时的情况下将其重写为工作状态,并在拖动音量控制柄时删除转换,并在单击时添加转换?

我只能在这个mouseMove方法中执行此操作,因为我在我的代码中重载它。

0 个答案:

没有答案