iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
0

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()

上一篇
JS30-Day27-Click & Drag
下一篇
JS30-Day29-Countdown Timer
系列文
新手也能懂的JS3030

尚未有邦友留言

立即登入留言