Search code examples
javascripthtmlvideohtml5-videovideo.js

What's the best way to minimise the jumps when VideoJS fluid player is loading?

I'm using v5.5.3 of VideoJS, and I'm using the rather delightful responsive option detailed in this VideoJS blog post (the documentation's a bit patchy: at the moment this blog post seems to be the only place where the option's described).

My video tag markup looks like this:

<div class="video-js-container">
    <video id="1234" class="video-js vjs-default-skin vjs-big-play-centered"
        controls
        preload="metadata"
        poster="http://vjs.zencdn.net/v/oceans.png"
        data-setup='{"fluid":true}'>
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
    </video>
</div>

This sizes the video fluidly as advertised. But I'm finding that as the page loads it goes through various contortions as the HTML5 video tag loads, then the VideoJS version, which is then resized. The page jumps around a lot. I'd like to either constrain the initial dimensions, or constrain them and hide the player till the process of loading and resizing is finished. Can anyone suggest the best way? Is there a VideoJS class to signify the player is loaded, rendered and resized?

Solution

  • I discovered the jumping around wasn't VideoJS's fault at all - I had a pre-existing CSS rule to give fluid sizing to videos:

    video {
    width: 100%;
    height: auto !important;
}

    This was causing the VideoJS player to have a massive height while loading, before the JS library took effect and wrapped the video element with the .video-js div. I found that just excluding .video-js from the rule got the players loading nicely: 

    video:not(.video-js) {
    width: 100%;
    height: auto !important;
}