Giải pháp của tôi dành cho video nhỏ hơn nhiều so với OP mô tả, ngăn video phát lại cho đến khi video được đệm hoàn toàn. Video sẽ phát cho người dùng cũ nếu video đã được lưu vào bộ nhớ cache.
Câu trả lời dưới đây bị ảnh hưởng nặng nề bởi điều này answer và đã được thử nghiệm trên Chrome, Safari và Firefox. tập tin
Javascript:
$(document).ready(function(){
// The video_length_round variable is video specific.
// In this example the video is 10.88 seconds long, rounded up to 11.
var video_length_round = 11;
var video = document.getElementById('home_video_element');
var mp4Source = document.getElementById('mp4Source');
// Ensure home_video_element present on page
if(typeof video !== 'undefined'){
// Ensure video element has an mp4Source, if so then update video src
if(typeof mp4Source !== 'undefined'){
$(mp4Source).attr('src', '/assets/homepage_video.mp4');
}
video.load();
// Ensure video is fully buffered before playing
video.addEventListener("canplay", function() {
this.removeEventListener("canplay", arguments.callee, false);
if(Math.round(video.buffered.end(0)) >= video_length_round){
// Video is already loaded
this.play();
} else {
// Monitor video buffer progress before playing
video.addEventListener("progress", function() {
if(Math.round(video.buffered.end(0)) == video_length_round){
this.removeEventListener("progress", arguments.callee, false);
video.play();
}
}, false);
}
}, false);
}
});
Trên javascript cập nhật nguồn gốc của phần tử video như thế này một:
<video id="home_video_element" loop="" poster="/assets/home/video_poster_name.jpg" preload="auto">
<source id="mp4Source" type="video/mp4">
</video>