JS - Call Page When Video Fully Loaded

I have a one page site, which features multiple CSS animations, and a video. At the moment the video stutters if you have a poor wifi connection due to it's autoplay. I'd like to update the site so that it only begins the css animations and plays the video once all of the video has been loaded. In the meantime a loading page should be displayed i.e a white page with a rotating icon.