[程式碼&DEMO] [HackMD完整筆記]
1.使用HTML5的video tag做出各種播放器功能
2.使程式更精簡,去除耦合
使 去控制
用=========>
者
Video 執行
狀 =============>
態
(相對應) 觸發
事 =================>
件 .addEventListener
updateButton()
觀念: 影片改變了狀態,才去更新畫面。按鈕是跟隨著影片狀態去改變,我們只要去操作影片狀態。 這是因為,除了點擊播放/暫停按鈕以外,我們還可以通過鍵盤快捷鍵、第三方插件甚至耳機上的操作按鈕等其他方式來控制。因此,通過本身的播放狀態來判斷是最不容易出錯的。
判斷播放狀態
寫一個togglePlay方法,根據影片的播放狀態來判斷該執行.play()方法或.pause()方法。
function togglePlay() {
if (video.paused) {
video.play();
} else (
video.pause();
)
}
video.addEventListener('click', togglePlay);
toggle.addEventListener('click', togglePlay);
function tooglePlay() {
video.paused ? video.play() : video.pause()
}
video [method] ( )=video.play( )
但不能寫成video.method( ),因為這樣就變成呼叫video底下的function method。
使用中括號[]包起來的會自動變成字串,取其物件屬性,再去做呼叫。
function tooglePlay() {
const method = vidoe.paused ? 'play' : 'pause';
video[method]();
}
圖標的切換
在調用 updateButton 的時候,這個方法已經被綁定在了 addEventListener 的調用者上,也就是綁定到了 video 上。因此,this.paused 在這裡就相當於 video.paused。
// 邏輯
function updateButton() {
const icon = this.paused ? '►' : '❚ ❚';
toggle.textContent = icon;
}
// 事件
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);
快退/快進按鍵添加 data-skip 屬性,對應的值為快退/快進的秒數。data-**
此屬性需通過.dataset.**
來取得。
// 邏輯
function skip() {
video.currentTime += parseFloat(this.dataset.skip);
}
// 事件
skipButtons.forEach(button => button.addEventListener('click', skip));
因為我們獲取到的是字串,所以要通過 parseFloat 轉換。
function skip() {
video.currentTime += parseFloat(this.dataset.skip);
}
進度條操作
progress_filled是一个 flex 定位的元素,改變它的 flex-basis 的百分比值就可以調整它所占的父元素寬度。flex-basis 值代表 flex 元素在主軸方向上的初始尺寸。
// 根据当前播放时间来调节进度条
function handleProgress() {
const percent = (video.currentTime / video.duration) * 100;
progressBar.style.flexBasis = `${percent}%`;
}
offsetX屬性: 該屬性代表鼠標單擊位置相位對於該元素的水平偏移。得到後轉換計算出該位置的百分比,同時也就知道了進度條的百分比。