Day11: Custom Video Player

Copy 
1/* Get Our Elements */
2const player = document.querySelector(".player");
3const video = player.querySelector(".viewer");
4const progress = player.querySelector(".progress");
5const progressBar = player.querySelector(".progress__filled");
6const toggle = player.querySelector(".toggle");
7const skipButtons = player.querySelectorAll("[data-skip]");
8const ranges = player.querySelectorAll(".player__slider");
9const fullscreenBtn = player.querySelector(".screen__button");
10const iconBtn = player.querySelector(".icon__button");
11
12/* Build out functions */
13
14// 影片播放或暫停
15function togglePlay() {
16  const method = video.paused ? "play" : "pause";
17  video[method]();
18}
19
20//依據影片播放或暫停去改變icon ui
21function updateButton() {
22  const icon = this.paused
23    ? ` <i class="fas fa-play"></i>`
24    : `<i class="fas fa-pause"></i>`;
25  toggle.innerHTML = icon;
26
27  const iconVideo = this.paused ? ` <i class="fas fa-play"></i>` : ``;
28  iconBtn.innerHTML = iconVideo;
29}
30
31//快進及快退， 讓video的curentTime =+ data-skip 的時間
32function skip() {
33  video.currentTime += parseFloat(this.dataset.skip);
34}
35
36//video 的 volume 及 playbackRate 的值進行修改
37function handleRangeUpdate() {
38  video[this.name] = this.value;
39}
40
41//進度條ui及顏色調整
42function handleProgress() {
43  const percent = (video.currentTime / video.duration) * 100;
44  progressBar.style.flexBasis = `${percent}%`;
45  progressBar.style.background = "#ff0000";
46}
47
48//更改影片播放位置
49function scrub(e) {
50  const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
51  video.currentTime = scrubTime;
52}
53
54//request fullscreen
55function fullscreen() {
56  video.requestFullscreen();
57}
58
59/* Hook up the event listeners */
60
61//針對影片播放暫停做處理
62video.addEventListener("click", togglePlay); //點擊影片執行togglePlay
63toggle.addEventListener("click", togglePlay); //下方toggle點擊執行togglePlay
64video.addEventListener("play", updateButton); //監聽影片播放執行按鈕畫面
65video.addEventListener("pause", updateButton); //監聽影片暫停執行按鈕畫面
66
67//當影片current time 有更新時，則出發timeupdate事件，進行進度條ui呈現
68video.addEventListener("timeupdate", handleProgress);
69
70//針對快進/慢進做處理
71skipButtons.forEach((button) => button.addEventListener("click", skip));
72
73//針對音量、速度滑動條進行處理
74ranges.forEach((range) => range.addEventListener("change", handleRangeUpdate));
75ranges.forEach((range) =>
76  range.addEventListener("mousemove", handleRangeUpdate)
77);
78
79//針對進度條做處理，按著滑鼠 mousedown 時是 true,放開滑鼠 mouseup 則為 false
80let mousedown = false;
81progress.addEventListener("click", scrub); //點擊進行條執行scrub
82progress.addEventListener("mousemove", (e) => mousedown && scrub(e)); //如果mousedown=true，則執行scrub
83progress.addEventListener("mousedown", () => (mousedown = true));
84progress.addEventListener("mouseup", () => (mousedown = false));
85
86//針對全螢幕做處理
87fullscreenBtn.addEventListener("click", fullscreen);