Question

我正在后台预加载一个视频，在某个时刻，我想将它注入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')
});

注入和播放html5视频而不会闪烁

1 个答案: