Change page background after video has loaded

Question

I have a simple question that may require a complex answer.

I have used the tag in HTML5 to make a video background. While the video loads I want the page background to be white. Once the video loads the background should change to black.

The video auto loads and starts automatically once it is loaded.

Is there a way to do this with either a bit of PHP, JavaScript or maybe JQuery?

Answer 1

Assuming your markup looks like

<video id='myvideo'></video>

Try attaching an onload event handler

document.getElementById('myvideo').onload = function() {
    document.body.style.backgroundColor = 'black';
}