Event that fires when video is loaded and first frame is visible? Or how to crossfade two videos another way?

Question

I am trying to use video.js in a samsung smart tv application which unfortunately can only play one video at a time.

I need to simulate the smooth, preferably crossfade, transition between two videos. I am trying to do this by first fading in a screenshot of the next video and using that to cover up the screen while I switch video sources of the video.js plugin. When the player is ready I need to remove the screenshot.

The closest I have found is to remove the screenshot when "loadedmetadata" is called however I am still seeing an inconsistant blip of a black flash between the time the screenshot is removed and the video plays. This is very jarring and I need a consistent way to remove the screenshot only when the first frame has been loaded into the player.

Any other suggestions on how I could each a smooth transition between two videos while only using one video element would be greatly appreciated.

Answer 1

I found the loadeddata event which, as described on MDN :

The loadeddata event is fired when the first frame of the media has finished loading.

loadedmetadata only announce that media informations such as duration are loaded, but the loadeddata event should do the trick.