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

Question

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

possible duplicate of [Checking if a html5 video is ready](http://stackoverflow.com/questions/5181865/checking-if-a-html5-video-is-ready) — bjb568, Jan 10 '14 at 19:01
Onloadeddata="myfunc()" - does not work !!! ... readyState === 4 - does not work! ... canplaythrough - does not work! ... these just load the video for a fiew seconds — Murtpoiss, Jan 10 '14 at 19:48
just tried this ... oncanplaythrough ... it just starts the funcktion when the video tag is loaded and does not wait for the video to load!! — Murtpoiss, Jan 10 '14 at 20:22
FYI (3 years after question) 'canplay' works on current Chrome. Javascript example: `var video = document.getElementById('myvideo');` `video.oncanplay = function(){...};` For example, I tested fading out an image that overlaid the video, while starting the video playing. — ToolmakerSteve, Aug 06 '14 at 05:10

Alexandre Tranchant · Answer 1 · 2014-01-10T20:03:47.710

2

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

edited Jan 10 '14 at 20:03

answered Jan 10 '14 at 19:18

Alexandre Tranchant

4,426
4
43
70

1

if i use this ... what this does is that when your video data has loaded as much as fiew seconds or less(DOES NOT LOAD THE FULL VIDEO) ... and then runs the function() ... So this does not help ... – Murtpoiss Jan 10 '14 at 19:39
It seems that onloadeddata attribute does not work on chrome. But attaching an event handler through addEventListener does the trick ! I edited my answer. It works on my Chrome Browser, now. And it works with jQuery too. – Alexandre Tranchant Jan 10 '14 at 20:03
how do i add the ... display='block'; ... play(); ... display='none'; ... to it? – Murtpoiss Jan 10 '14 at 20:33
without jQuery : document.getElementById('rainVideo').style.display="none"; document.getElementById('rainVideo').style.display="display"; – Alexandre Tranchant Jan 11 '14 at 07:29
What i ment was ... where do i put these ? ... if you mean that i should put these instead of the ... alert('The video is loaded'); ... then it will not work ... tried this – Murtpoiss Jan 11 '14 at 07:49
It works on my computer. (be carefull : document.getElementById('rainVideo').style.display="block"; I wrote display instead of block – Alexandre Tranchant Jan 11 '14 at 14:56
Do you mean this works for You ? ... http://i.stack.imgur.com/UscXv.png ... try it yourself ... does this page work with your chrome ? ... http://rasim.ee/martin/hmm/index.html – Murtpoiss Jan 11 '14 at 17:43

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

1 Answers1

Linked