视频无法预加载且仍在缓冲

Question

我试图让视频在开始播放之前预先加载，所以我不会有任何缓冲问题，但无论我做什么，它似乎仍然会在视频中随机缓冲，这是我正在使用的代码：

<video preload="auto" height="auto" id="video" width="100%" controls="" autoplay="false"><source     src="/media/export/cms/01_CL_Sleigh 1280.mp4" type="video/mp4"> <source src="/media/export/cms/01_CL_Sleigh 1280.webm" type="video/webm"> <source src="/media/export/cms/01_CL_Sleigh 1280.ogv" type="video/ogg"> <img src="http://placehold.it/400x400"> </video>
    <p><source src="/media/export/cms/01_CL_Sleigh 1280.mp4" type="video/mp4"> <source src="/media/export/cms/01_CL_Sleigh 1280.webm" type="video/webm"> <source src="/media/export/cms/01_CL_Sleigh 1280.ogv" type="video/ogg">
    </p><p><source src="/media/export/cms/01_CL_Sleigh 1280.mp4" type="video/mp4"> <source src="/media/export/cms/01_CL_Sleigh 1280.webm" type="video/webm"> <source src="/media/export/cms/01_CL_Sleigh 1280.ogv" type="video/ogg"></p>
    <source src="/media/export/cms/01_CL_Sleigh 1280.mp4" type="video/mp4"> <source src="/media/export/cms/01_CL_Sleigh 1280.webm" type="video/webm"> <source src="/media/export/cms/01_CL_Sleigh 1280.ogv" type="video/ogg">


var clinique_animation = {

video: document.getElementById('video'),
preload: true,
actions: [
    {
        time: 8, // seconds
        action: function() {
            $('.text').fadeIn();                
        }
    },
    {
        time: 9, // seconds
        action: function() {
            $('a.reset').fadeIn().on('click', function() {
                clinique_animation.reset();
            });
        }
    }
],
init: function() {
    var self = this;
    if(this.preload === true) {
        this.video.addEventListener('canplaythrough', function() {
            self.video.play();
            $('#video').fadeIn();
        }, false);    
    }
    this.timer_actions();
},
reset: function() {
    this.timer_actions();
    this.video.currentTime = 0;
    $('a.reset').fadeOut();
    $('.text').fadeOut(); 
},
timer_actions: function() {
    var self = this;
    var eventFired = {};
    this.video.removeEventListener('timeupdate');
    this.video.addEventListener('timeupdate', function(event) {;                                                                   
        var currentTime = parseInt(self.video.currentTime, 10);

        for(var i = 0, l = self.actions.length; i < l; i++) {
            if(currentTime === self.actions[i].time && !eventFired[currentTime]) {
                self.actions[i].action();
                eventFired[currentTime] = true;
            }
        }
    }, false);
}
}

$(document).ready(function() {
    clinique_animation.init();   
});