CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
NewKidOnTheBlock
NewKidOnTheBlock

Reputation: 1511

unload play delay for html 5 video

I'm not sure if it's the structure of my code or there's something I'm missing in my code, however it's seems I am have a slightly slow loading with my html video in Safari. The video plays for at least 1sec before it's actually visible... is the a way I can create a delay before the video starts playing? click here

<video preload="auto" autoplay volume="3" id="video-wall__content">
    <source src="video/ad.mp4" type="video/mp4">
    <source src="video/ad.ogv" type="video/ogg">
</video>

I have added...

$(window).load(function () { $(document.body).fadeIn(2000); ('#video-wall-wrapper').get(0).play(); });

Upvotes: 2

Views: 1779

Answers (1)

Saturnix
Saturnix

Reputation: 10564

Try this.

$(window).load(function () {
    $(document.body).fadeIn(2000, function(){
        ('#video-wall-wrapper').get(0).play();
    });   
});

The video will start only when fadeIn is complete. As per specs, fadeIn accepts 2 arguments.

  • duration: A string or number determining how long the animation will run.

  • complete: A function to call once the animation is complete.

This is holds true for every async event in jQuery. You always have a way to provide callback functions.

<video preload="auto" autoplay volume="3" id="video-wall__content">

autoplay: Instructs the UA to automatically begin playback of the video as soon as it can do so without stopping.

Source.

So yeah, that basically defies the whole sense of starting the video with jQuery.

Upvotes: 1

Related Questions