This is the 13th day of my participation in Gwen Challenge
Custom HTML5 Video Player
This module is a look at the title, is to realize a custom HTML 5 video player, according to the author’s final code display, it can be seen that the final effect in order to realize the video can control the progress bar, click on the picture can pause/play, on the left side of the control bar for voice control, the article to the right of the control for speed control.
1. Effect display
1.index-START.html
Is a style effect, first for you to implement good, default run this effect.
2.index-FINISHED.html
Change the default JS file in your code to a JS file with a suffixed completion identifier.
Second, the implementation
The final code
/* Get the element */
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('.skip');
const ranges = player.querySelectorAll('.player__slider');
function togglePlay() {
const method = video.paused ? 'play' : 'pause';
video[method]();
}
function updateButton() {
const icon = this.paused ? '►' : '❚ ❚';
console.log(icon);
toggle.textContent = icon;
}
function skip() {
video.currentTime += parseFloat(this.dataset.skip);
}
function handleRangeUpdate() {
//volume, playbackRate
video[this.name] = this.value;
}
function handleProgress() {
//currentTime indicates the currentTime
/ / total duration time
//flexBasis default width
const percent = (video.currentTime / video.duration) * 100;
progressBar.style.flexBasis = `${percent}% `;
}
function scrub(e) {
const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
video.currentTime = scrubTime;
}
/* Hook up the event listeners */
video.addEventListener('click', togglePlay);
toggle.addEventListener('click', togglePlay);
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);
video.addEventListener('timeupdate', handleProgress);
skipButtons.forEach(button= > button.addEventListener('click', skip));
ranges.forEach(range= > range.addEventListener('change', handleRangeUpdate));
ranges.forEach(range= > range.addEventListener('mousemove', handleRangeUpdate));
let mousedown = false;
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove'.(e) = > mousedown && scrub(e));
progress.addEventListener('mousedown'.() = > mousedown = true);
progress.addEventListener('mouseup'.() = > mousedown = false);
Copy the code
Iii. Summary and review
This module belongs to one of the lighter modules.
First we add a new property of Controls in the video TAB. Then we will see that the property already has some control page properties.
<video class="player__video viewer" src="652333414.mp4" controls></video>
Copy the code
Of course, the effect of the original author is more inclined to practice knowledge points and techniques, and study separately.
The original author of this part of the content has been very good, mainly to analysis and understanding, and there is no great significance of copying again.
Process decomposition
- Access to elements
/* Some tweaks are made, depending on personal usage */
<button data-skip="To 10" class="player__button skip"> « 10 s < / button ><button data-skip="25" class="player__button skip">25 s »</button>
/* Get the element */
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('.skip');
const ranges = player.querySelectorAll('.player__slider');
Copy the code
- Related events
(1) Play/pause
function togglePlay() {
const method = video.paused ? 'play' : 'pause';
video[method]();
}
Copy the code
The ternary operator is used, leaving out the if… Else.
The second interesting and novel writing method is video[method]().
(2) Change the button when playing/pausing
function updateButton() {
const icon = this.paused ? '►' : '❚ ❚';
console.log(icon);
toggle.textContent = icon;
}
Copy the code
But then I have a question, before if this kind of similar, must be written in one event, if split into two events, then how to string together?
(3) Series of events
/* Hook up the event listeners */
video.addEventListener('click', togglePlay);
toggle.addEventListener('click', togglePlay);
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);
Copy the code
I have to say, I find this kind of writing novel. It does this by calling the Play() and pause() methods of togglePlay() when you click, and changing the button toggle as you call them.
Wow, learned learned learned!!
(4) The picture goes forward/backward
function skip() {
video.currentTime += parseFloat(this.dataset.skip);
}
skipButtons.forEach(button= > button.addEventListener('click', skip));
Copy the code
(5) Event binding of volume and playback speed
function handleRangeUpdate() {
//volume, playbackRate
video[this.name] = this.value;
}
ranges.forEach(range= > range.addEventListener('change', handleRangeUpdate));
ranges.forEach(range= > range.addEventListener('mousemove', handleRangeUpdate));
Copy the code
In the past, we might use video.volume and video.playbackrate to value values. Now, we can use parentheses to directly value values, saving a lot of steps. (6) Drag the picture to play
function handleProgress() {
//currentTime indicates the currentTime
/ / total duration time
//flexBasis default width
const percent = (video.currentTime / video.duration) * 100;
progressBar.style.flexBasis = `${percent}% `;
}
Copy the code
(7) Click the corresponding time to play the picture
function scrub(e) {
const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
video.currentTime = scrubTime;
}
let mousedown = false;
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove'.(e) = > mousedown && scrub(e));
progress.addEventListener('mousedown'.() = > mousedown = true);
progress.addEventListener('mouseup'.() = > mousedown = false);
Copy the code
And don’t forget to update the progress bar!!
video.addEventListener('timeupdate', handleProgress);
Copy the code
Otherwise it would be like this!!
4. Key and difficult points
Firstly, it automatically retrieves relevant learning knowledge points:
Developer.mozilla.org/zh-CN/docs/…
Developer.mozilla.org/zh-CN/docs/…
In fact, if you absorb these two parts of the content, today’s module is very easy to understand.
In addition, the original author has added some novel writing methods, which is a very good guide to programming ideas and styles.