Day28-課題內容

在第十一天的課題Custom Video Player中，我們製作了一個客製化影片播放器，而在今天的內容當中，我們要利用移動滑鼠來控制影片的播放速度。[1]
實作連結

進入課題

在作者的範例當中，影片的右邊有一個速度控制器，且這個控制器的高度以及內容會隨著我們的滑鼠位置而更動。而這邊會使用到的技巧就跟影片播放器中的時間軸相同，透過取的控制器的整體高度與滑鼠在元素中的座標，我們就能計算出控制器的高度，影片的播放速度以及控制器的內容。

首先我們先將需要的元素選取起來，且將控制器的背景元素 <div class="speed"> 加上監聽事件與觸發函示。而這邊監聽了 onmousemove 事件，讓鼠標在指定元素上的移動的時候，
觸發更改播放速度的功能：

const container = document.querySelector('.speed');
const volumn = document.querySelector('.speed-bar');
const video = document.querySelector('video');

container.addEventListener('mousemove', modifySpeed);

在 onmousemove 觸發的函示中，我們透過 event.offsetY 取得當下滑鼠在 Y 軸上的位置，並透過 element.getBoundingRect().height 方法取得控制器背景元素的總高度，再藉由這兩個值所換算出的比例，作為控制器高度，並將這個值分別指派給文字內容與播放器速度：

function modifySpeed (event) {
    //取得滑鼠在控制器背景元素中的 Y 軸位置
    const yCoord = event.offsetY;
    //取得控制器背景元素的整體高度
    const totalHeight = this.getBoundingClientRect().height;
    //換算成比例
    const ratio = yCoord / totalHeight;
    //換算成影片速度
    const playRate = ratio*4;
    //指定控制器的顯示高度
    volumn.style.height = `${ratio*100}%`;
    //指定控制器的文字內容
    volumn.innerHTML = `${playRate.toFixed(2)}x`;
    //指定影片的播放速度
    video.playbackRate = playRate;
  };

上面特別用到 number.toFix(n) 方法。這個方法能將數字四捨五入到小數點第 n 位，並保持這個格式。[2]

總結

今天已經來到 JS30的倒數第三天，此次的課題也是透過滑鼠的位置與元素的大小，來控制頁面中的一些元素屬性。而在後面幾天的內容當中，大家應該都有發現頁面上的特殊效果，很多都是藉由這兩個屬性結合出來的，希望大家都能對不同情況下該使用的滑鼠位置屬性，與元素位置以及大小都能有深入的了解，做出更多的頁面特效！

參考資料

1. javascript30
2. MDN-Number.prototype.toFixed()