[英]Preloading HTML5 video for smooth AJAX page transitions
I am creating smooth transitions between pages via jQuery's .fade()
effect. 我正在通过jQuery的
.fade()
效果在页面之间创建平滑过渡。 The second page ( page2.html ) contains HTML5 video elements (either .webm or .mp4 depending on the browser). 第二页( page2.html )包含HTML5视频元素( .webm或.mp4,具体取决于浏览器)。 How can I preload these movies prior to
page2.html
loading in order to eliminate the brief flash/blip indicating the location of the video element itself? 如何在加载
page2.html
之前预加载这些电影,以消除指示视频元素本身位置的短暂闪烁/闪烁? (You know, the greyish screen showing precisely where the player is.) (您知道,灰色屏幕准确显示了播放器的位置。)
To be clear, I am not asking how to eliminate the white flash between page loads; 需要明确的是,我不是在问如何消除页面加载之间的白色闪烁。 I simply want to have the video player ready and movies completely loaded before ever displaying page2.html itself.
我只想在显示page2.html本身之前就准备好视频播放器并完全加载电影。
AJAX fade transitioning: AJAX淡入淡出过渡:
$('#wrapper').fadeOut(2500, function() {
$(this).load('page2.html', function() {
$(this).fadeIn(2500);
});
});
HTML5 video from page2.html 来自page2.html的HTML5视频
<video id="example" preload="auto" autoplay="autoplay" loop="loop">
<source src="video/example.webm" type="video/webm" />
<source src="video/example.mp4" type="video/mp4" />
</video>
Thanks to Bart. 多亏了Bart。
var loaded = false;
//If the video is loaded...
example.addEventListener("canplaythrough", function() {
//Make sure it only fires once
if (loaded == false) {
loaded = true;
//Fade in the content
$('#wrapper').fadeIn(2500);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.