自定义播放器

HTML：

<div class="bgBox">
  <div class="left">
    <div class="video-box">
    <video src="movies/movie01.mp4"></video>
    </div>
    <div class="icon-box">
    <i class='iconfont icon-bofang icon-play'></i>
    <i class='iconfont icon-quanping1 icon-quan'></i>
    <input type="range" min='0' max='100' value='0' class='range1'>
    <i class='iconfont icon-shengyin icon-sheng'>
      <input type="range" min='0' max='100' value='100' class='range2'>
    </i>
  </div>
  </div>
  <div class="right">
    <ul>
      <li data-src="movies/movie01.mp4">视频一</li>
      <li data-src="movies/movie02.mp4">视频二</li>
      <li data-src="movies/movie03.mp4">视频三</li>
      <li data-src="movies/movie04.mp4">视频四</li>
    </ul>
  </div>
</div>

CSS：

<link rel="stylesheet" href="font_zrmrh2javuxlayvi/iconfont.css">
<style>
  *{
  padding: 0;
  margin: 0;
  list-style: none;
  }
  body,html{
    height: 100%;
  }
  body{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bgBox{
    width: 700px;
    height: 500px;
    border: 1px solid #000;
    box-shadow: 0 0 3px 5px #000;
    display: flex;
  }
  .left{
    width: 80%;
    height: 100%;
  }
 .video-box{
    width: 100%;
    height: 90%;
    background-color: #000;
  }
  .video-box video{
    width: 100%;
    height: 100%;
  }
  .icon-box{
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    text-align: center;
    color: #f91;
  }
  .icon-play{
    flex: 1;
    font-size: 26px;
  }
  .icon-quan{
    flex: 1;
    font-size: 26px;
  }
  .range1{
    flex: 7;
  }
  .icon-sheng{
    flex: 1;
    font-size: 26px;
    position: relative;
  }
  .range2{
    position: absolute;
    transform: rotate(-90deg);
    left: -35px;
    top: -70px;
    display: none;
  }
  .icon-sheng:hover .range2{
    display: block;
  }
  .right{
    width: 20%;
    height: 100%;
    background-color: grey;
    text-align: center;
  }
  .right li{
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #fff;
    background-color: saddlebrown;
    border-bottom: 1px solid #000;
  }
</style>

JS：

<script>
  var iconPlay =document.querySelector(".icon-play");
  var video =document.querySelector("video");
  var iconQuan =document.querySelector(".icon-quan");
  var range1 =document.querySelector(".range1");
  var range2 =document.querySelector(".range2");
  var iconVolume =document.querySelector(".icon-sheng");
  //功能一：播放与暂停功能
  //1. 给播放按钮注册点击事件
  //2. 播放视频  修改小图标
  iconPlay.addEventListener('click',function () {
    //判断播放条件
    if(this.classList.contains('icon-bofang')){
      this.classList.remove('icon-bofang');
      this.classList.add('icon-bofang1');
      //播放视频
      video.play();
    }else{
      //暂停视频
      video.pause();
      this.classList.add('icon-bofang');
      this.classList.remove('icon-bofang1');
    }
  })
  //功能二：全屏
  iconQuan.addEventListener('click',function () {
    //让视频全屏
    if ("webkitRequestFullScreen" in video) {
      video.webkitRequestFullScreen();
    } else {
      video.mozRequestFullScreen();
    }
  })
  //功能三：
  // 1. 拖动小滑块，需要调整视频的进度
  // 当前视频的进度/视频的总的长度 = 当前input的value/100
  // 2. 视频播放，设置小滑块的value值。
  //当内容发生改变的时候会触发
  range1.addEventListener('input',function () {
    video.currentTime = this.value/100 * video.duration;
  });
  video.addEventListener("timeupdate", function () {
    range1.value = this.currentTime / this.duration * 100;
  });
  //功能四：修改音量
  // 当前的音量/最大的音量 = range2的值/100
  //思路
  //1. 给range2注册input事件
  //2. 设置音量
  //3. 判断如果音量是0，需要换一个图标
  range2.addEventListener("input", function () {
    video.volume = this.value / 100;

    //如果音量是0，换图标
    if(video.volume == 0) {
      iconVolume.classList.remove("icon-shengyin");
      iconVolume.classList.add("icon-iconset0259");
    }else {
      iconVolume.classList.add("icon-shengyin");
      iconVolume.classList.remove("icon-iconset0259");
    }
  });
  //功能五
  //思路：
  //1. 给所有的li注册事件
  //2. 获取当前li的src属性
  //3. 设置给video的src
  var lis =document.querySelectorAll(".right li");
  for(var i =0; i < lis.length; i++){
    lis[i].onclick =function () {
      video.src = this.dataset.src;
      //最后重新加载播放
      video.load();
      video.play();
      range1.value = 0;
    }
  };
  
</script>