Question

现在，我正在使用视频标签制作自定义视频播放器。我想制作一个视频进度条，通过拖动鼠标来控制播放时间。

因此我使用了mouseup，mousedown，mousemove事件，但除鼠标单击外，它不适用于鼠标拖动。而且我在制作进度条时使用了div，而不是输入类型=“ range”。所以我真的很想知道为什么它不适用于div元素的原因。

我花了两个星期的时间来解决这个问题，我几乎哭了。请有人帮我...

我删除了自动播放。我在标签中设置了视频的宽度，高度。当我使用控制台日志检查“百分比”和“位置”的值时，它们没有任何问题。除“ mousemove”外，“ mouseup”，“ mousedown”事件是有效的。

controlProgressBar() {
    let timeDrag = false;
    this.$totalProgress.mousedown((e) => {
      timeDrag = true;
      this.updateBar(e.pageX);
    });
    $(document).mouseup((e) => {
      if(timeDrag) {
        timeDrag = false;
        this.updateBar(e.pageX);
      }
    });
    $(document).mousemove((e) => {
      if(timeDrag) {
        alert('mousemove');
        this.updateBar(e.pageX);
      }
    });
  }

  updateBar(x) {
    const maxDuration = this.video.duration;
    const position = x - this.$totalProgress.offset().left;
    let percent = 100 * position / this.$totalProgress.width();

    if(percent > 100) {
      percent = 100;
    }
    if(percent < 0) {
      percent = 0;
    }

    this.$playProgress.css({width: `${percent}%`});
    this.video.currentTime = maxDuration * percent / 100;
  }

          <div>
            <div>
              <video id="video0" src="${dataVideo[1].videoUrl}?v=${.now?long}"
                     muted="muted"
                     playsinline
                     poster="${dataVideo[1].videoThumb}"
                     >
              </video>
            </div>
            <div class="player_bg"></div>
            <div class="player_foot">
              <div id="progress" class="progress_bar">
                <div id="totalBar" class="total_bar">
                  <div id="loadProgress" class="loading_bar"></div>
                  <div id="playProgress" class="play_bar">
                    <div class="play_progress_bg">
                  </div>
                  <button id="pointProgress" class="link_point">현재지점</button>
                </div>
              </div>
            </div>
          </div>

.player_foot{display:none;position:absolute;bottom:0;left:0;z-index:10;width:100%;height:44px;box-sizing:border-box;letter-spacing:-1px}
.progress_bar{position:absolute;bottom:0;left:51px;right:51px;z-index:20;height:2px;padding:21px 5px 23px;box-sizing:border-box}
.progress_bar .total_bar{position:relative;width:100%;height:2px;background:rgba(255, 255, 255, 0.7)}
.progress_bar .loading_bar{position:absolute;bottom:0;left:0;width:100%;height:2px;font-size:0;line-height:0;background:rgba(255, 255, 255, 0.9);text-indent:-9999px;-webkit-transform-origin:0;transform-origin:0;transition:transform 0.35s ease-out}
.progress_bar .play_bar{position:absolute;bottom:0;left:0;height:2px;font-size:0;line-height:0;background:#FAE100;text-indent: -9999px}
.link_point{position:absolute;bottom:-21px;right:-20px;z-index:5;width:40px;height:44px;margin-left:-10px;font-size:0;line-height:0;text-indent:-9999px;outline:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.link_point:after{display:block;width:16px;height:16px;margin:0 auto;border-radius:16px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.15);background:#fff;content:'';transition:all .07s cubic-bezier(0.4, 0.0, 1, 1)}

没有控制台错误消息。.

mousemove事件不起作用，除非单击带有视频标签的js

0 个答案: