video_player.html.erb

<div class="video-player">
  <div class="player" data-controller="video-player" data-target="videoplayerPlayer">
     <video data-target="video-player.video" data-action="click->video-player#togglePlay timeupdate->video-player#progressUpdate" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164" class="player__video viewer" ></video>
     <div class="player__controls">
       <div data-target="video-player.progress" data-action="click->video-player#scrub mousedown->video-player#mousedown mouseup->video-player#mouseup mousemove->video-player#mousemove" class="progress">
        <div data-target="video-player.progressBar" class="progress__filled"></div>
       </div>
       <button data-target="video-player.toggle" data-action="click->video-player#togglePlay" class="player__button toggle" title="Toggle Play">►</button>
       <input data-action="change->video-player#rangeUpdate mousemove->video-player#rangeUpdate" type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1" alt="Volume">
       <input data-action="change->video-player#rangeUpdate mousemove->video-player#rangeUpdate" type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
       <button data-action="click->video-player#skip" data-skip="-10" class="player__button">« 10s</button>
       <button data-action="click->video-player#skip" data-skip="25" class="player__button">25s »</button>
     </div>
   </div>
</div>