iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
1
Modern Web

實作經典 JavaScript 30系列 第 15

Day15: 自製的影片撥放器(一)

WES BOS系列影片
Alex快速導讀系列影片

今天要來製作自己的影片撥放器,覺得原始的控制套件很醜?
那就自己做一個,不過作者已經幫我們做好樣式了。
我們還是注重在怎麼將這些寫好的樣式都用JS加上功能吧!

MDN-video
HTMLMediaElement
先開起來準備

會製作到的功能:

影片播放按鈕
設置快進或倒退按鈕
用拖拉的方式調整音量大小
用拖拉的方式調整播放速度
影片播放進度條

1.先抓出會使用到的元素們

const player = document.querySelector('.player');//撥放器本體
const video = player.querySelector('.viewer');//影片本體
const progress = player.querySelector('.progress');//影片撥放進度條外框
const progressBar = player.querySelector('.progress__filled');//影片撥放進度條內部
const toggle = player.querySelector('.toggle');//影片撥放按鈕
const skipButtons = player.querySelectorAll('[data-skip]');//快進或倒退按鈕
const ranges = player.querySelectorAll('.player__slider');//音量大小、播放速度

2.製作播放影片的功能。
最直覺的寫法如下,相信很容易理解
如果影片現在是停止狀態就播放影片,否則就暫停影片。

function togglePlay() {
  if(video.paused) {
    video.play()
  } else {
    video.pause()
  } 
}

但作者給了另一種更簡潔的寫法

function togglePlay() {
  const method = video.paused ? 'play' : 'pause';
  video[method]();
}

這邊用了中括號取key值的方法去執行。
key值包含了'play'與'pause'
用三元運算子去判斷現在method應該是'play'或'pause'
判斷後才代入中括號中執行。

3.綁定監聽器
點擊影片本身時會觸發togglePlay()
點擊播放按鈕時會觸發togglePlay()

video.addEventListener('click',togglePlay)
toggle.addEventListener('click',togglePlay)

4.播放影片時按鈕icon也需要做切換,製作切換按鈕的函式

function updateButton() {
  const icon = this.paused ? '►' : '❚ ❚';
  toggle.textContent = icon;
}

5.綁定監聽器

video.addEventListener('click',togglePlay)
video.addEventListener('play',updateButton)
video.addEventListener('pause',updateButton)

toggle.addEventListener('click',togglePlay)

6.設置快進或倒退按鈕,製作快進或倒退的函式
這邊利用在HTML中設置 data-*
讀取dataset設置好的數字,來做快進或倒退,只需要更改data-skip的值,就可以輕鬆的更改時間。

function skip() {
  video.currentTime += parseFloat(this.dataset.skip);
}

7.綁定監聽器

skipButtons.forEach(button => button.addEventListener('click', skip));

今天簡單的製作兩種功能,是否感覺也沒這麼難呢?
明天再繼續完成囉~


上一篇
Day14: 一次選取想要選取的checkbox
下一篇
Day16: 自製的影片撥放器(二)
系列文
實作經典 JavaScript 3030
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言