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

  1. 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
  1. 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.