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

【问题标题】：injecting and playing html5 video without flickering注入和播放html5视频而不闪烁
【发布时间】：2014-09-21 18:44:47
【问题描述】：

我正在后台预加载一个视频，并且在某个时候我想将它注入到 dom 中并立即播放它，而不会出现这种烦人的 flickr/repaint/reflow 瞬间。我能做些什么来解决这个问题。我提供了一个测试用例，显示图像和视频做同样的事情来证明差异。图像显示流畅，视频显示相当刺耳。（哦，我已经在 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');

});

【问题讨论】：

标签： javascript html video

【解决方案1】：

使用canplay 事件而不是play 来显示视频 - 请参阅MDN。

当有足够的视频缓冲以供播放时触发，因此在缓冲时不会出现黑屏 - http://jsfiddle.net/1d0tcae3/2/

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

【讨论】：