Thursday, June 22, 2023

Video Viewer with JavaScript: Enhancing Your HTML Video Player

Video viewer with JS.✌

 Have you ever wanted to create a custom video player for your website? With the power of JavaScript, you can take your HTML video player to the next level. In this tutorial, we'll walk you through the process of building an interactive video viewer using JavaScript

First, let's take a look at the HTML code that sets up our video player:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Video Player</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="player">
      <video class="player__video viewer"
src="652333414.mp4"></video>

      <div class="player__controls">
        <div class="progress">
          <div class="progress__filled"></div>
        </div>
        <button class="player__button toggle"
            title="Toggle Play">►</button>
        <input
          type="range"
          name="volume"
          class="player__slider"
          min="0"
          max="1"
          step="0.05"
          value="1"
        />
        <input
          type="range"
          name="playbackRate"
          class="player__slider"
          min="0.5"
          max="2"
          step="0.1"
          value="1"
        />
        <button data-skip="-10"
class="player__button">« 10s</button>
        <button data-skip="25"
class="player__button">25s »</button>
      </div>
    </div>

    <script src="./script.js"></script>
  </body>
</html>


This HTML structure sets up a video player with controls such as play/pause button, volume slider, playback speed slider, skip buttons, and a progress bar. Now, let's dive into the JavaScript code that brings this video player to life:

/* Get Our Elements */
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');

/* Build out functions */
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 += parseF
loat(this.dataset.skip);
}

function handleRangeUpdate() {
  video[this.name] = this.value;
}

function handleProgress() {
  const percent = (video.curren
tTime / 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);
video.addEventListener('play',
updateButton);
video.addEventListener('pause',
updateButton);
video.addEventListener('timeupdate',
handleProgress);

toggle.addEventListener('click',
togglePlay);
skipButtons.forEach((button) =>
button.addEventListener('click', skip));
ranges.forEach((range) => range.
addEventListener('change',
     handleRangeUpdate));
ranges.forEach((range) =>
  range.addEventListener('mousemo
ve', handleRangeUpdate)
);

let mousedown = false;
progress.addEventListener('click'
, scrub);
progress.addEventListener('mousemo
ve', (e) => mousedown && scrub(e));
progress.addEventListener('mousedo
wn', () => (mousedown = true));
progress.addEventListener('mouseup
', () => (mousedown = false));


In the above code, we add event listeners to the progress bar to enable scrubbing functionality. When the progress bar is clicked, the scrub function is called to update the video's current time based on the click position. The mousedown flag is used to determine whether the mouse button is being held down, allowing continuous scrubbing as the mouse moves.

That's it! With this JavaScript code, you now have an enhanced HTML video player with interactive controls and a progress bar that updates as the video plays. Users can toggle play/pause, adjust volume and playback speed, skip forward or backward, and scrub through the video using the progress bar.

Feel free to customize the styling and behavior of the video player to match your website's design and requirements - or you could use mine!. Enjoy building your own video viewer with JavaScript! 

Querying DOM Elements: The code starts by selecting various elements from the DOM (Document Object Model) using document.querySelector and querySelectorAll. These elements include the main video player container, the video element itself, progress bar elements, toggle button, skip buttons, and range sliders.


Defining Functions:

togglePlay(): This function toggles the video play/pause state by checking if the video is currently paused or playing and calling the appropriate method (play() or pause()) on the video element.

updateButton(): This function updates the toggle button's icon based on whether the video is currently paused or playing.

skip(): This function allows the user to skip forward or backward in the video by adjusting the currentTime property of the video element based on the data-skip attribute of the clicked button.

handleRangeUpdate(): This function updates the video's volume and playback rate based on the value of the range sliders.

handleProgress(): This function updates the progress bar's filled width based on the current time and duration of the video, giving a visual representation of the progress.

scrub(e): This function allows the user to scrub through the video by calculating the scrub time based on the click position on the progress bar and updating the currentTime property accordingly.

Hooking up Event Listeners:

The video element has event listeners for the following events:

click: Calls the togglePlay() function to toggle the play/pause state of the video.play: Calls the updateButton() function to update the toggle button's icon when the video starts playing.

pause: Calls the updateButton() function to update the toggle button's icon when the video is paused.

timeupdate: Calls the handleProgress() function to update the progress bar as the video plays.The toggle button has a click event listener that calls the togglePlay() function to toggle the video play/pause state.The skip buttons have click event listeners that call the skip() function to allow skipping forward or backward in the video.

The range sliders have event listeners for both change and mousemove events. When the value of a range slider changes, the handleRangeUpdate() function is called to update the corresponding video property (volume or playback rate). Additional Functionality:

The mousedown flag is used in conjunction with the progress bar's mousemove event listener to enable continuous scrubbing. When the progress bar is clicked and the mouse button is held down, the scrub() function is called continuously as the mouse moves, allowing the user to scrub through the video seamlessly.

By combining these functions and event listeners, the JavaScript code enables interactive functionality for the HTML video player. Users can play/pause the video, adjust volume and playback speed, skip forward or backward, and scrub through the video using the progress bar.

Remember to include the JavaScript file in your HTML code using the <script> tag and provide the correct file path.

I hope this provides a more elaborate understanding of the JavaScript code and its functionality within the HTML video player. Happy coding!

Labels: , , , , , , , , , , , , , ,

posted by Stephen @ June 22, 2023   1 Comments