Notes on Day 11 of 30 Days of JavaScript

• notes • series • javascript • javascript30

The lesson mostly emphasized how to manipulate the browser’s native video player’s design and behavior.

Table of Contents

Lessons Learned

HTMLMediaElement.play()

This method attempts to begin playback of the media. It returns a Promise which is resolved when playback has been successfully started.

Failure to begin playback for any reason, such as permission issues, result in the promise being rejected.

const promise = HTMLMediaElement.play();

const video = document.getElementById('banner-video');
video.addEventListener('play', handlePlay);

HTMLMediaElement.pause()

The HTMLMediaElement.pause() method will pause playback of the media, if the media is already in a paused state this method will have no effect.

HTMLMediaElement.pause();

const video = document.getElementById('banner-video');
video.addEventListener('pause', handlePause);

HTMLMediaElement: timeupdate event

The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.

const video = document.getElementById('banner-video');
video.addEventListener('timeupdate', handleProgress);

video.ontimeupdate = () => handleProgress();

References

Twitter, LinkedIn