Creating a responsive video player with HTML, CSS, and JavaScript

With the increasing popularity of online video content, creating a responsive video player has become an essential skill for web developers. In this tutorial, we will create a responsive video player using HTML, CSS, and JavaScript. We will use HTML5 video element to embed videos, CSS for styling the player, and JavaScript to add functionality to the player.

Prerequisites

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. You should also have a text editor and a web browser installed on your computer.

Creating the HTML Markup

The first step in creating a responsive video player is to create the HTML markup. We will use the HTML5 video element to embed the video in our page. Here's the basic HTML markup for our video player:

<div class="video-player">
  <video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
  </video>
</div>

In the above markup, we have created a div with a class of "video-player" to wrap our video element. Inside the div, we have added the video element with the controls attribute. We have also added three different video sources in different formats to ensure cross-browser compatibility.

Styling the Video Player with CSS

The next step is to style our video player using CSS. We will add some basic styles to make the player look good and responsive. Here's the CSS code:

.video-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.video-player video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

In the above CSS, we have set the position of the video-player div to relative and set its height to 0. We have also added a padding-bottom of 56.25% to maintain the aspect ratio of the video. This will ensure that the video scales properly on different screen sizes.

We have also set the position of the video element to absolute and set its top and left positions to 0. We have set the width and height of the video to 100% to make it fill the entire parent container.

Adding JavaScript Functionality to the Video Player

The final step is to add some JavaScript functionality to the video player. We will add a play/pause button to the player and also show the current time and duration of the video. Here's the JavaScript code:

const video = document.querySelector('video');
const playButton = document.querySelector('.play-button');
const currentTime = document.querySelector('.current-time');
const duration = document.querySelector('.duration');

playButton.addEventListener('click', togglePlay);

function togglePlay() {
  if (video.paused) {
    video.play();
    playButton.textContent = 'Pause';
  } else {
    video.pause();
    playButton.textContent = 'Play';
  }
}

video.addEventListener('timeupdate', updateTime);

function updateTime() {
  const minutes = Math.floor(video.currentTime / 60);
  const seconds = Math.floor(video.currentTime % 60);
  currentTime.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
  duration.textContent = `${Math.floor(video.duration / 60)}:${Math.floor(video.duration % 60)}`;
}

In the above code, we have first selected the video element and the play/pause button using the querySelector method. We have also selected the current time and duration elements using their respective classes.

We have added an event listener to the play/pause button which calls the toggle function when clicked. This function checks if the video is currently paused, and if it is, it plays the video and changes the text of the play/pause button to "Pause". If the video is currently playing, it pauses the video and changes the text of the play/pause button to "Play".

We have also added an event listener to the video element for the "timeupdate" event. This event is fired whenever the current time of the video changes. In the updateTime function, we calculate the current time and duration of the video and display them in the current time and duration elements respectively.

Conclusion

In this tutorial, we have created a responsive video player using HTML, CSS, and JavaScript. We have used the HTML5 video element to embed the video, CSS to style the player, and JavaScript to add functionality to the player. With this knowledge, you can create your own custom video player that works well on different screen sizes and devices.