What is the difference between canplay and loadedmetadata event listener for video?

Issue

I was wondering what the difference between loadedmetadata and the canplay event listeners for video. According to MDN:

canplay Sent when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the CAN_PLAY readyState.

loadedmetadata The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.

There are also two event listeners including loadeddata and loadedstart.

For my use case, I want to wait for the video element to be loaded so that I can grab the video.currentTime. My timeupdate function uses this information but I believe the video doesn't fully load so it throws a small error that it can't grab the currentTime of the video.

What is considered best practice for waiting for a video to load or play?

Solution

canplay usually implies that enough content has been loaded that, assuming network conditions remain constant, the browser will be able to play to the end of the content without buffering. This normally only fires after loadedmetadata as that metadata is what tells the browser the length and other important information about the content.

loadedmetadata only refers to the metadata about the content itself - in the case of an mp4 file for instance that would be extracted from the MOOV atom (hence it being best practice to encode the mp4 so that is at the start, not the end as default, of the file on disk)

If you only need access to things like currentTime and are less concerned with buffer-free playback then loadedmetadata should suffice, but my personal preference (if the usecase will be playing through without skipping in the majority of views) would also to be wait for canplay just to create a better user experience.

Answered By - Offbeatmammal