js11 - Custom Video Player

内容

html部分(自带)

   <div class="player">
     <video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>

     <div class="player__controls">
       <div class="progress">
        <div class="progress__filled"></div>
       </div>
       <button class="player__button toggle" title="Toggle Play">►</button>
       <input type="range" name="volume" class="player__slider" min=0 max="1" step="0.05" value="1">
       <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
       <button data-skip="-10" class="player__button">« 10s</button>
       <button data-skip="25" class="player__button">25s »</button>
     </div>
   </div>

  <script src="scripts.js"></script>

css部分(自带)

html {
   
  box-sizing: border-box;
}

*, *:before, *:after {
   
  box-sizing: inherit;
}

body {
   
  padding: 0;
  display:flex;
  background:#7A419B;
  min-height:100vh;
  background: linear-gradient(135deg, #7c1599 0%,#921099 48%,#7e4ae8 100%);
  background-size:cover;
  align-items: center;
  justify-content: center;
}

.player {
   
  max-width:750px;
  border:5px solid rgba(0,0,0,0.2