javascript - 注入(inject)并播放html5视频而不闪烁

Question

我正在后台预加载一个视频，在某个时刻我想将它注入(inject)到 dom 中并立即播放它，而不会出现这种烦人的 flickr/重绘/回流的情况。我能做些什么来解决这个问题吗？我提供了一个测试用例，显示图像和视频执行相同的操作来演示差异。图像显示平滑，视频显示相当粗糙。 (哦，我在 safari 和 chrome 上测试过这个，问题非常相似)

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