为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第21天 播放器组件的样式和播放暂停功能的实现

【金秋打卡】第21天 播放器组件的样式和播放暂停功能的实现

2022.11.13 00:00 82浏览

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

课程讲师:西门老舅

课程内容:

今天学习的内容是实现播放器组件的播放与暂停功能。

播放器组件样式

这一块要实现控制条的样式,需要注意的点有:

  • 层叠性,保证播放态的进度条的层级高,滑块的层级高
  • 滑块的起始位置,需要向前移动,保证滑块的中心位于起始位置
.video {
  position: relative;
  overflow: hidden;
}

.video .iconfont {
  font-size: 20px;
  color: white;
  cursor: pointer;
}
.video-content {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, .8)
}

.video-progress {
  position: relative;
  height: 5px;
  background-color: #222223;
}

.video-progress-now {
  position: absolute;
  left: 0;
  z-index: 20;
  width: 50%;
  height: 100%;
  background-color: #ff6a03;
}

.video-progress-suc {
  position: absolute;
  left: 0;
  z-index: 10;
  width: 70%;
  height: 100%;
  background-color: #555;
}

.video-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  /* 起始位置 */
  margin-left: -7px;
  margin-top: -4px;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 50%;
}

.btn-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 45px;
}

.btn-group .left, .btn-group .right {
  display: flex;
  align-items: center;
}

.video-play {
  margin-right: 15px;
}

.video-time {
  font-size: 16px;
  color: white;
}

.video-volume {
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.video-volume .icon-volume {
  margin-right: 10px;
}
.video-volume-progress {
  position: relative;
  width: 100px;
  height: 5px;
  background-color: #222223;
}

.video-volume-progress-now {
  width: 50%;
  height: 100%;
  background-color: #ff6a03;
}

.video-volume-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  /* 起始位置 */
  margin-left: -7px;
  margin-top: -4px;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 50%;
}

.video-full {
  font-size: 18px;
}

实现播放和暂停

HTML5 提供的 标签用于播放视频,同时提供了 JS API 用于控制视频的播放,音量调节,进度调节等。

本节先实现视频的播放与暂停,主要用到的事件和方法有:

  • canplay 事件:视频是否加载完毕
  • play 事件:视频处于播放状态
  • pause 事件:视频处于暂停状态
  • paused 属性:视频是否处于暂停状态
  • play 方法:播放视频
  • pause 方法:暂停视屏
handle() {
    let videoElm = this.tempContainer.querySelector('video')
    // 播放暂停按钮
    let playBtn = this.tempContainer.querySelector('.video-play i')

    // 视频加载完毕
    videoElm?.addEventListener('canplay', ()=>{
      console.log('canplay')
    })

    // 切换视频状态
    playBtn?.addEventListener('click', ()=>{
      // 视频处于暂停状态
      if(videoElm?.paused) {
        videoElm.play()
      } else {
        videoElm?.pause()
      }
    })

    // 视频播放事件
    videoElm?.addEventListener('play', ()=>{
      // 监听到视频处于播放状态,则将播放按钮替换为暂停按钮
      playBtn?.classList.remove('icon-play')
      playBtn?.classList.add('icon-pause')
    })
    
    // 视频暂停事件
    videoElm?.addEventListener('pause', ()=>{
      // 监听到视频处于播放状态,则将暂停按钮替换为播放按钮
      playBtn?.classList.remove('icon-pause')
      playBtn?.classList.add('icon-play')
    })
  }
}

课程收获

这节课实现了播放器组件的样式和播放暂停的功能,主要是理清 video 元素的相关事件和方法。
图片描述

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

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

评论

作者其他优质文章

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

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

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

风间影月说签约讲师

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

进入讨论

Tony Bai 说签约讲师

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

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

举报

0/150
提交
取消