впрыскивание и воспроизведение html5 видео без мерцания

Question

Я предварительно загружаю видео в фоновом режиме, и в определенный момент я хотел бы ввести его в дом и сразу же воспроизвести его без этого раздражающего flickr/repaint/reflow, который продолжается доли секунды. Есть ли что-нибудь, что я могу сделать, чтобы исправить это. Я предоставляю тестовый пример, показывающий изображение и видео, делающие то же самое, чтобы продемонстрировать разницу. Изображение отображается плавно, и видео отображается довольно жестко. (О, я уже пробовал на сафари и хром и вопрос очень похож)

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'); 

}); 

Answer 1

Используйте canplay событие вместо play для отображения видео - см MDN.

Это срабатывает, когда достаточное количество видео в буфер для того, чтобы играть, так что вы не получите черный экран, показывающий, когда она буферные вверх - http://jsfiddle.net/1d0tcae3/2/

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