Skip to content

11-CUSTOM VIDEO PLAYER提几个想法 #69

Description

@ma1zeryu

哈哈,这个仓库这么多年之后还有人看,已经认真读了你之前写的东西了哈哈😘😘😘

  1. 作者的代码有个bug,如果鼠标移出控制条后取消点击,mousedown变量就没法被正确改变,下次鼠标放在控制条上就可以直接拖动进度条了
  2. 提一个优化,因为这里进度条的更新和视频的更新被放在一起了,进度条的更新原本很快,但视频更新有点慢,他就被拖累了,所以单独拿出来一个函数来更新进度条,就会让交互体验更丝滑
  3. 附件是完整的代码,小菜第一次提issue哈哈

scripts.js

function updateProgress(e) {
  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
  const percent = (scrubTime / video.duration) * 100;
  progressBar.style.flexBasis = `${percent}%`;
}
progress.addEventListener('mousemove', (e) => {
    if (!mousedown) return;
    updateProgress(e);
    scrub(e);
});

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions