CODEWITHSUNDEEP
htmlvideoloadbuffer
Murtpoiss
Murtpoiss

Reputation: 1

how to run js code when video is fully buffered/loaded

I have searched all over google for this and nothing does what it is supposed to It works perfect in IE ... You can see it in the logs that it works perferct ... But it wont work in chrome!!! Why is it doing so in chrome ? ... It loads 10sek from catche and then nothing ...

<div style=" width:100%; height:320px; margin-top:-95px; background-image:url('video-logo.png'); background-repeat:no-repeat; background-position:center;"> 
<div id="videoRain" class="videoWrapper" style="text-align:center; display: none;"> 
<video id="rainVideo" width="100%" height="400px" preload="auto"> 
  <source src="rain-video.mp4" type="video/mp4"> 
  Your browser does not support the video tag. 
</video> 
</div> 
</div> 
<script> 
setTimeout(function(){ 
var refreshId = window.setInterval(function(){ 
   myVid=document.getElementById('rainVideo'); 
   puhvitud = Math.round(myVid.buffered.end(0)); 
   if (puhvitud >= 14) { 
  setTimeout(function(){document.getElementById('videoRain').style.display='block';},0); 
      setTimeout(function(){document.getElementById('rainVideo').play();},0); 
      clearInterval(refreshId); 
      setTimeout(function(){document.getElementById('videoRain').style.display='none';},15000); 
   } 
   console.log(puhvitud); 
}, 2000); 
},1000); 
</script>

Maybe someone has another way to do this ? When the video is fully loaded ... this should be ran...

setTimeout(function(){document.getElementById('videoRain').style.display='block';},0); 
setTimeout(function(){document.getElementById('rainVideo').play();},0); 
setTimeout(function(){document.getElementById('videoRain').style.display='none';},15000);

EDIT:

Tried this:

    <script>

        function runVideoRain(){
            rainVideo.addEventListener("loadeddata", runRain, false);
        }
    function runRain()
    {
        setTimeout(function()                {document.getElementById('videoRain').style.display='block';},0);
        setTimeout(function(){document.getElementById('rainVideo').play();},0);
        setTimeout(function()        {document.getElementById('videoRain').style.display='none';},15000);
    }, false);
    </script>

Does not work !!

Uncaught SyntaxError: Unexpected token , Uncaught ReferenceError: runVideoRain is not defined onloadeddata

Upvotes: 0

Views: 2827

Answers (1)

Alexandre Tranchant
Alexandre Tranchant

Reputation: 4551

You can use the onloadeddata attribute.

onloadeddata : Script to be run when media data is loaded

<video id="rainVideo" width="100%" height="400px" preload="auto" onloadeddata="runMyFunction();"> 
  <source src="rain-video.mp4" type="video/mp4"> 
  Your browser does not support the video tag. 
</video> 
<script>
    function runMyFunction(){
        alert('The video is loaded');
    }
</script>

It seems that onloadeddata attribute does not work on chrome. But attaching an event handler through addEventListener does the trick !

rainVideo.addEventListener("loadeddata", myRunFunction, false);
//with jQuery
$(rainVideo).on("loadeddata", myRunFunction);

Upvotes: 2

Related Questions