我正在后台预加载一个视频,在某个时刻我想将它注入(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');
});
最佳答案
使用 canplay
事件而不是 play
来显示视频 - 请参阅 MDN 。
当足够的视频缓冲以供播放时,此事件会触发,因此在缓冲时不会显示黑屏 - http://jsfiddle.net/1d0tcae3/2/
$video.on('canplay', function() {
$video.css('visibility', 'visible')
});
关于javascript - 注入(inject)并播放html5视频而不闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25962612/