'What is the difference between canplay and loadedmetadata event listener for video?
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 1:[1]
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.
Solution 2:[2]
The canplay event is fired when the user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
The canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
canplay will be fired first and then the canplaythrough. You can use these events to change the UI like :- remove loader and start the play.
The loadedmetadata event is fired when the metadata has been loaded. The duration and dimensions of the media and tracks are now known.
The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame. Let's assume a video is if 10 seconds. You have set the video's currentTime to 5s. Then loadeddata will be fired once the 5th seconds frame has been loaded.
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Offbeatmammal |
| Solution 2 | Anant Raj |