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

课程名称：TypeScript封装播放器组件

课程章节：第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 元素的相关事件和方法。