javascript - Video not pre-loading and still buffering -
i'm trying video preload before starts playing don't have issues buffering, no matter still seems buffer @ random points through video, here code using:
<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 = 0, l = self.actions.length; < l; i++) { if(currenttime === self.actions[i].time && !eventfired[currenttime]) { self.actions[i].action(); eventfired[currenttime] = true; } } }, false); } } $(document).ready(function() { clinique_animation.init(); });
Comments
Post a Comment