版权声明: https://blog.csdn.net/qq_39207948/article/details/85341295
完整源代码:完整源代码
NO.1 视频播放器控制台隐藏弹出的设置
/*控制台的样式设置*/
.player__controls {
display:flex; /*弹性布局,子元素生效*/
position: absolute;
bottom:0;
width: 100%;
transform: translateY(100%) translateY(-5px);
transition:all .3s;
flex-wrap:wrap; /*运行flex的子元素进行灵活的换行布局*/
background:rgba(0,0,0,0.1);
}
.player:hover .player__controls {
transform: translateY(0); /*这里将控制台显示出来*/
}
/*当有鼠标悬停视频播放器时,控制台弹出,此时设置进度条高度为15px*/
.player:hover .progress {
height:15px;
}
代码分析:隐藏露头功能(天猫界面趴着那只猫,只露了个眼睛,悬停会跳出来,就可以据此来模拟实现)
transform: translateY(100%) translateY(-5px);
这里的控制台有一定的高度,translateY(100%),是为了将控制台通过位移结合overflow:hidden进行完全隐藏,
然后translateY(-5px),是为了将控制台顶部高度为5px的控制条,向上移动然后将其显示出来。
NO.2:音量和播放速度滑动条功能的实现
//提取的代码片段
<input type="range" name="volume" class="player__slider" min=0 max="1" step="0.05" value="1" title="音量">
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1" title="播放速度">
const ranges = Array.from(player.querySelectorAll('.player__slider'));
ranges[0].addEventListener("change",handle1);
ranges[1].addEventListener("change",handle2);
// 音量改变函数
function handle1(){
console.log("yinliang:",this.value);
video.volume=this.value;
}
//播放速度改变函数
function handle2(){
console.log("shudu:",this.value);
video.playbackRate=this.value;
}
该视频播放器有两个滑动条,前者控制音量的大小,后者控制播放速度,由于input类型相同,但是绑定的事件处理函数又不相同,可以利用name值做到一个函数来处理不同的回调函数功能(设定name值和对象的属性值一致),具体代码如下:
ranges.forEach(item=>item.addEventListener('change',rangeHandle));
// 音量和播放速度控制函数
function rangeHandle(){
video[this.name]=this.value; //这里动态的进行了对象的属性值设置
}
其中需要注意的是,他们分别有一个 volume
和 playbackRate
的 name
属性,我们起这两个名字是因为他们是 video
对象里对应音量和播放速度的两个属性名。这样起名并不是必须的,但可以让我们后面 js 的操作更精简。
因为我们上面说过,input
的 name
值和 video
对象中的属性名是一样的,可以看到在 handleRangeUpdate
函数中我们利用了 this.name
的写法来代表属性,,这里的 this
一样是 addEventListener
的调用者,即 range
。