新手村28 - Video Speed Controller

11th鐵人賽 javascript 前端新手村

Chester

2019-10-13 15:45:38

997 瀏覽

分享至

28 - Video Speed Controller

俗話說的好，一天一蘋果，醫生遠離我

一天一 JS，What the f*ck JavaScript？

small steps every day - 記錄著新手村日記

完成目標

功能
- 拖拉 Range 改變影片播放數度
畫面
- 拖拉 Range 可以顯示目前的速度倍率（格式：nx）

index_START.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video Speed Scrubber</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="wrapper">
    <video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
    <div class="speed">
      <div class="speed-bar">1×</div>
    </div>
  </div>

<script>
</script>
</body>
</html>

Style.css

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #4C4C4C url('https://unsplash.it/1500/900?image=1021');
  background-size: cover;
  font-family: sans-serif;
}

.wrapper {
  width: 850px;
  display: flex;
}

video {
  box-shadow: 0 0 1px 3px rgba(0,0,0,0.1);
}

.speed {
  background: #efefef;
  flex: 1;
  display: flex;
  align-items: flex-start;
  margin: 10px;
  border-radius: 50px;
  box-shadow: 0 0 1px 3px rgba(0,0,0,0.1);
  overflow: hidden;
}

.speed-bar {
  width: 100%;
  background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  color: white;
  height: 16.3%;
}

JS - step by step

首先，我們先將需要的元素選取起來，分別要整個調整速度的元件、調整速度內的Bar及當調整Bar的數值會影響到左側Video的播放速度

<script>
  const speed = document.querySelector('.speed');
  const bar = speed.querySelector('.speed-bar');
  const video = document.querySelector('.flex');

  console.log(speed)
  //<div class="speed">
  //  <div class="speed-bar" style="height: 87%;">3.53×</div>
  //</div>

  console.log(bar)
  //<div class="speed-bar">1×</div>

  console.log(video)
  //<video class="flex" width="765" height="430" src="http://clips.vorwaerts-
  //gmbh.de/VfE_html5.mp4" loop controls></video>

</script>

再來加上個監聽事件吧～每當滑鼠調整Bar的數值會觸發事件 handleMove

<script>
  const speed = document.querySelector('.speed');
  const bar = speed.querySelector('.speed-bar');
  const video = document.querySelector('.flex');
	
  function handleMove(e) {
    console.log(e);
  }
  speed.addEventListener('mousemove', handleMove);

</script>

現在來取得控制器背景元素中的 Y 軸位置、整體高度吧！

<script>
  const speed = document.querySelector('.speed');
  const bar = speed.querySelector('.speed-bar');
  const video = document.querySelector('.flex');
	
  function handleMove(e) {
    const y = e.pageY - this.offsetTop;
    const percent = y / this.offsetHeight;
    const min = 0.4;
    const max = 4;
    const playbackRate = percent * (max - min) + min;
  }
  speed.addEventListener('mousemove', handleMove);

</script>

最後只要指定控制器的顯示高度、文字內容，還有左側的影片的播放速度就可以調整惹w

<script>
  const speed = document.querySelector('.speed');
  const bar = speed.querySelector('.speed-bar');
  const video = document.querySelector('.flex');
	
	function handleMove(e) {
    const y = e.pageY - this.offsetTop;
    const percent = y / this.offsetHeight;
    const min = 0.4;
    const max = 4;
    const playbackRate = percent * (max - min) + min;
    
    bar.style.height = height;
    const height = Math.round(percent * 100) + '%';

	bar.textContent = playbackRate.toFixed(2) + '×';

	video.playbackRate = playbackRate;
  }
  
  speed.addEventListener('mousemove', handleMove);

</script>

就大功告成啦！

JS - final

<script>
  const speed = document.querySelector('.speed');
  const bar = speed.querySelector('.speed-bar');
  const video = document.querySelector('.flex');
	
  function handleMove(e) {
    const y = e.pageY - this.offsetTop;
    const percent = y / this.offsetHeight;
    const min = 0.4;
    const max = 4;
    const playbackRate = percent * (max - min) + min;
    
    bar.style.height = height;
    const height = Math.round(percent * 100) + '%';
	bar.textContent = playbackRate.toFixed(2) + '×';
	video.playbackRate = playbackRate;
  }
  speed.addEventListener('mousemove', handleMove);

</script>

本刊同步於個人網站：http://chestertang.site/

本次範例程式碼原作者來源：https://tinyurl.com/yavm5f5n