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

回答1:

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);

来源：https://stackoverflow.com/questions/21051933/how-to-run-js-code-when-video-is-fully-buffered-loaded

标签

html5

video

load

buffer