自定义视频播放器制作

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。