为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第24天 拖拽进度和音量条控制

【金秋打卡】第24天 拖拽进度和音量条控制

2022.11.16 00:04 120浏览

课程章节:第5章 弹出层中的Video播放器组件开发 5.8

课程讲师:西门老舅

课程内容:

今天学习的内容是实现进度条的拖拽播放,以及音量调节。

拖拽播放

核心是使用原生 JS 模拟拖拽事件。

进度条有一个小球,当鼠标点击它时,记录下此刻的位置,然后监听鼠标的移动,当鼠标松开时,记录下此刻小球的位置。通过这两个位置,得出滑块移动的距离,再根据占完整进度条的比例,计算出视频的实时时间,通过前面学过的 vide0.currentTime 进行设置。

 handle() {
    // 进度条容器
    let videoProcess = this.tempContainer.querySelector('.video-progress') as HTMLElement

    // 进度条位置
    let currentProcess = this.tempContainer.querySelector('.video-progress-now') as HTMLElement
    let sucProcess = this.tempContainer.querySelector('.video-progress-suc') as HTMLElement
    let barProcess = this.tempContainer.querySelector('.video-progress-bar') as HTMLElement

    // 拖拽播放
    barProcess.addEventListener('mousedown', function(event: MouseEvent) {
      let downX = event.pageX
      let downL = barProcess.offsetLeft
      
      // 监听鼠标移动事件,模拟拖拽
      // 方便移除事件监听,使用 DOM 0级事件绑定。但是最好使用 DOM2 级事件绑定
      document.onmousemove = function (event: MouseEvent) {
        let scale = (event.pageX - downX + downL + 8) / videoProcess.offsetWidth
        if(scale < 0) {
          scale = 0
        } else if(scale > 1) {
          scale = 1
        }

        // 设置实时进度
        currentProcess.style.width = scale * 100 + '%'
        sucProcess.style.width = scale * 100 + '%'
        barProcess.style.left = scale * 100 + "%"
        videoElm.currentTime = scale * videoElm.duration
      }

      // 松开鼠标时移除事件绑定
      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null
      }

      event.preventDefault()
    })
  }
}

音量调节

video 元素提供了音量有关的 API, video.volume ,取值范围是 0~1,0表示静音,1 表示声音最大。

在拖拽音量滑块时,通过监听鼠标的移动事件,获得滑块实时位置,计算出此时所占音量调节器整体的比例,计算出值设置给 video.volume 即可。

handle() {

    // 音量调节容器 
    let volumeProcess = this.tempContainer.querySelector('.video-volume-progress') as HTMLElement
    let curVolumeProcess = this.tempContainer.querySelector('.video-volume-progress-now') as HTMLElement
    let barVolumeProcess = this.tempContainer.querySelector('.video-volume-progress-bar') as HTMLElement
    
    // 音量调节    
    barVolumeProcess.addEventListener('mousedown', function(event: MouseEvent) {
      let downX = event.pageX
      let downL = barVolumeProcess.offsetLeft
      
      document.onmousemove = function (event: MouseEvent) {
        let scale = (event.pageX - downX + downL + 8) / volumeProcess.offsetWidth
        if(scale < 0) {
          scale = 0
        } else if(scale > 1) {
          scale = 1
        }

        curVolumeProcess.style.width = scale * 100 + '%'
        barProcess.style.left = scale * 100 + "%"
        videoElm.volume = scale
      }

      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null
      }

      event.preventDefault()
    })
}

课程收获

这节课实现了拖拽进度条播放功能,和音量调节功能,核心都是一致的,就是模拟拖拽操作,通过监听鼠标移动,计算元素位置的变化的比例,以此来设置实时的播放进度和音量。
图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
1
获赞与收藏
3

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消