TIL Waiting for video to load event listeners

POSTED ON: Sep 04, 2020

TAGS: js

I wanted to fire an action in JS when there was enough video loaded that wouldn't cause a weird buffer.

I discovered the Media Events loadedmetadata, loadeddata, canplay, canplaythrough


const video = document.querySelector("video");

video.addEventListener("loadeddata", () => {

  console.log("I have enough data to play now!");

});

So what's the difference between the Media Events?

(Media Events)[https://html.spec.whatwg.org/multipage/media.html#ready-states]

They return true when the readyState hits a certain threshold.

loadedmetadata -> readyState is newly equal to HAVE_METADATA or greater for the first time.
loadeddata -> readyState newly increased to HAVE_CURRENT_DATA or greater for the first time.
canplay -> readyState newly increased to HAVE_FUTURE_DATA or greater.
canplaythrough -> readyState is newly equal to HAVE_ENOUGH_DATA.

(Check their ready states)[https://html.spec.whatwg.org/multipage/media.html#ready-states]

HTML Documentation:
https://html.spec.whatwg.org/multipage/media.html#dom-media-have_current_data

Related TILs

Tagged: js

TIL why you should always use textContent

Today I learned the difference between 'Node.textContent'. It handles all elements, even hidden ones. It also prevents XSS attacks since it strips tags.

Jan 31, 2023

TIL prepend

When you're creating new elements in Javascript, you want to attach the new element to something that exists in the DOM already. You do that with append, and prepend.

Dec 04, 2022

TIL the simulating a Pipe function

It’s a pipe function that allows you to chain multiple operations together by taking a series of functions as arguments and applying them in a specific order to the input.

Dec 03, 2022