Day11 - 自定义视频播放器
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
项目效果
第十一天是要做一个自定义的视频播放器,在具有基本样式的前提下,实现视频的播放,暂停,进度条拖拽,音量加减,播放速度加减,快进快退的功能。
实现思路
- 首先需要分别将变量绑定至页面上的元素
- 分别实现播放,暂停,声音加减,播放速度加减,拖拽快进,点击快进等函数
- 事件绑定,将页面元素绑定相应触发事件
变量绑定
HTML 元素中,video
标签是我们的视频,而下面的 player__controls
就是我们自己的控制面板
1 | <div class="player"> |
开始之前我们先把所有需要用到的元素节点先取到:
1 | /* 获取元素 */ |
事件监听
1 | <!--点击播放--> |
分别给页面元素建立事件监听,并绑定其实现函数即可。此处有两处需注意:
- 有实现进度条的点击拖拽,不能仅绑定
mousemove
事件,因为这样鼠标在上面滑过就会出发事件,还需判断鼠标是否点下,此处可设立一个布尔类型的flag
标志鼠标是否按下,并分别绑定mouseup
事件和mousedown
事件,设置此flag
的值,这样在mousemove
事件的回调函数中先判断此flag
的值,若为真是才继续触发事件。 mousemove
的回调函数本应如下:
1 | { |
但这样不够简洁,我们改进此代码如下:
1 | filledflag && handlefilled(e) |
使用&&
判断左右两变量,只有两个都为真的时候整体表达式才为真,且在判断时从左向右依次判断,若左变量就为假,就不会再去执行右边的表达式。
函数实现
- 视频播放与暂停转换函数
1 | function videoplay(e){ |
判断当前视频的播放状态,播放时则变为暂停状态、暂停则变为播放状态;分别调用video.play()
和video.pause()
方法,在此使用video[play]()
和video[pause]()
是因为,使用中括号能够动态的传递变量进去,而使用点运算符不能传参。
- 播放按钮状态显示函数
1 | function handleToggle(){ |
如果视频是暂停状态就显示播放键’►’,否则显示暂定键’❚❚’
- 音量大小和播放速度控制函数
1 | function handlePlayerSlider(e){ |
在页面HTML中是这样设置的:
1 | <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1"> |
分别给每一个范围设置了一个name
属性,代表该范围所表示的内容,同时也是需控制的方法名,因此我们通过设置video[e.target.name] = e.target.value;
就可以分别改变视频的音量和播放速度,此处e.target
就是这两个input
元素,也等同于this
。
- 快进快退函数
1 | function handleSkip(e){ |
页面中快进快退的HTML代码如下:
1 | <button data-skip="-10" class="player__button">« 10s</button> |
分别设置了data-skip
属性,这样就可以通过.dataset.skip
获取到该属性的值,也即this.dataset.skip
,但该值是字符串类型,需要用parseFloat()
讲其转换为float数值型,分别将时间加减当前视频的播放事件就可以做到快进快退。
- 进度条随播放时间而显示的函数
1 | function filledUpdate(){ |
通过视频当前的播放时间除以视频的总时长*100,就是当前视频播放的百分比,将该值使用模版字符串的方式传给flexBasis
样式中即可,在CSS中该样式名为flex-basis
,但是谨记在js中需要多单词的CSS属性需要变为驼峰式的命名,第二个单词大写,切不可用连字符连接。
- 拖拽进度条定点观看的函数
1 | function handlefilled(e){ |
我们需要点击进度条时调整播放进度,那么我们改变进度,或者说宽度就需要得到鼠标点击的位置,这可以通过事件对象的 offsetX
属性来找到,该属性代表鼠标点击位置相对于该元素的水平偏移。得到偏移之后计算出该位置的百分比,那么也就知道了进度的百分比。