CODEWITHSUNDEEP
javascripthtmlvideo
David
David

Reputation: 9969

injecting and playing html5 video without flickering

I'm preloading a video in the background and at a certain point I would like to inject it into the dom and immediately play it without this annoying flickr / repaint / reflow thats going on for a split second. Is there anything I can do to fix this. I'm providing a test case showing an image and video doing the same thing to demonstrate the difference. The image displays smooth and the video displays rather harsh. (Oh, i've testing this on safari and chrome and issue is pretty similar)

http://jsfiddle.net/1d0tcae3/1/

// preloading video
var $video = $('<video />').attr({
    'width': '400',
    'height': '233',
}).append($('<source />').attr({
    'src': "http://dev.davidsalazar.com/videos/pugpie.com/test.mp4",
    'type': "video/mp4"
})).css('visibility', 'hidden');

// preloading image
var $image = $('<img />').attr({
    'src': 'http://pugpie.davidsalazar.com/assets/uploads/img/22b5f827b29eebf03edded92f5c8b11b.gif',
    'width': '404',
    'height': '416'
}).css('visibility', 'hidden');




$('#showplay-video').on('click', function(e) {
    e.preventDefault();

    $video.on('play', function() {
        // is there any other event or hackery i could possibly use to make this video play without the browser repainting / reflowing so harshly when playing the video
        $video.css('visibility', 'visible')
    });

    $('#video').html($video);
    $video[0].play();

});

$('#showplay-image').on('click', function(e) {
    e.preventDefault();

    $('#image').html($image);
    $image.css('visibility', 'visible');

});

Upvotes: 0

Views: 3517

Answers (1)

Rhumborl
Rhumborl

Reputation: 16609

Use the canplay event instead of play to display the video - see MDN.

This fires when enough of the video has buffered for it to be played, so you do not get the black screen showing while it is buffering up - http://jsfiddle.net/1d0tcae3/2/

$video.on('canplay', function() {
    $video.css('visibility', 'visible')
});

Upvotes: 4

Related Questions