【金秋打卡】第21天 播放器组件的样式和播放暂停功能的实现
2022/11/14 4:24:01
本文主要是介绍【金秋打卡】第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 元素的相关事件和方法。
这篇关于【金秋打卡】第21天 播放器组件的样式和播放暂停功能的实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?