课程名称: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 用于控制视频的播放,音量调节,进度调节等。
本节先实现视频的播放与暂停,主要用到的事件和方法有:
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 元素的相关事件和方法。