Wait for page to load or wait for X seconds before loading player

Question

I have a flash player on my webpage that autoplay.The problem is that the video starts playing before other content on the page has loaded.I want make to wait till the webpage has loaded or after a maximum of 2 seconds

<object id="flowplayer" width="640" height="360" data="/flowplayer-3.2.18.swf" type="application/x-shockwave-flash">

        <param name="allowfullscreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashvars" value='config={"clip":"URL goes here", "plugins": {"controls": {"autoHide" : false} }}' />

Answer 1

To start, I think that disabling the autoplay of your flowplayer can be the easiest way to avoid your problem. For the autoplay option, take a look here.

If you want always use javascript to load your flash content after some time, you can use, as you have already mentioned, the display:none like this :

CSS :

<style>
    #flowplayer {
        display: none;
    }
</style>

And then, for javascript, when the page is loaded :

window.addEventListener('load', function() {    
    document.getElementById('flowplayer').style.display = 'block';      
}, false);

Or using Jquery :

jQuery(window).load(function() {    
    document.getElementById('flowplayer').style.display = 'block';      
});

And using a timeout :

var timeout = setTimeout(function(){
    document.getElementById('flowplayer').style.display = 'block';
    clearTimeout(timeout);
}, 2000);

Hope that can help.

Answer 2

Maybe you can use $( document ).ready() function (https://learn.jquery.com/using-jquery-core/document-ready/ ) , if it doesn't help - you can insert the flash code with JS/JQuery after a while with setTimeout(), I hope it'll work.