title: What is the difference between canplay and loadedmetadata event listener for video?
body: <p>I was wondering what the difference between <code>loadedmetadata</code> and the <code>canplay</code> event listeners for video. According to MDN:</p>
  <blockquote>
  <p><strong>canplay</strong>   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.</p>
  <p><strong>loadedmetadata</strong>    The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.</p>
  </blockquote>
  <p>There are also two event listeners including <code>loadeddata</code> and <code>loadedstart</code>.</p>
  <p>For my use case, I want to wait for the <code>video</code> element to be loaded so that I can grab the <code>video.currentTime</code>. My <code>timeupdate</code> 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.</p>
  <p><strong>What is considered best practice for waiting for a video to load or play?</strong></p>