Category: HTML

We can create our own HTML video player where can control the playback speed.

First, we create the video tag as follows:

<video src='https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_640_3MG.mp4' controls></video>

We have the controls attribute so that we can see the playback controls.

Then we can add buttons to let us adjust the speed of the playback:

<video src='https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_640_3MG.mp4' controls></video>

<button id='1x'>
  1x
</button>
<button id='15x'>
  1.5x
</button>
<button id='2x'>
  2x
</button>

Now we can move onto the JavaScript portion of our code.

We can use event delegation to get the ID of the button that’s clicked and then set the playbackRate property of the video element accordingly:

const video = document.querySelector('video');
document.onclick = (e) => {
  if (e.target.id === '1x') {
    video.playbackRate = 1;
  }
  if (e.target.id === '15x') {
    video.playbackRate = 1.5;
  }
  if (e.target.id === '2x') {
    video.playbackRate = 2;
  }
}

We get the video element with document.querySelector and then we set the playbackRate property of the video according to the ID of the button that’s clicked according to the value of e.target.id.

Now we can create our own video player where we can adjust the playback speed of the video.

In HTML5, the datalist tag lets us create a quick drop down with options that we can pick from as we type them with a few lines of code.

To use it, we can write the following HTML:

<form>
  <input list="fruits" name="fruit">
  <datalist id="fruits">
    <option value="apple"></option>
    <option value="orange"></option>
    <option value="grape"></option>
    <option value="banana"></option>
    <option value="pear"></option>
  </datalist>
  <input type="submit">
</form>

All we have to do is add the datalist tag with the id which matches the value of the list attribute in the input we want our datalist element to show.

So both the list attribute of input and the id attribute of datalist have to have fruits as the value.

Then inside it, we just add the option tags with value attributes value which will show in when we type or click on the input.

That’s all we need to do to add a datalist element in HTML5.