Repository navigation
11-CUSTOM VIDEO PLAYER提几个想法 #69
Description
哈哈，这个仓库这么多年之后还有人看，已经认真读了你之前写的东西了哈哈😘😘😘
- 作者的代码有个bug，如果鼠标移出控制条后取消点击，mousedown变量就没法被正确改变，下次鼠标放在控制条上就可以直接拖动进度条了
- 提一个优化，因为这里进度条的更新和视频的更新被放在一起了，进度条的更新原本很快，但视频更新有点慢，他就被拖累了，所以单独拿出来一个函数来更新进度条，就会让交互体验更丝滑
- 附件是完整的代码，小菜第一次提issue哈哈
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