视频完全缓冲/加载后如何运行js代码 [英] how to run js code when video is fully buffered/loaded

问题描述

我已经在整个Google上搜索了此内容，但没有做任何事情，它应该如何处理
。它在IE中是完美的……您可以在日志中看到它的完美表现……但在铬！！！
为什么在chrome中这样做？ ...它会从catche加载10sek，然后什么也没有...

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

---

编辑：

---

对此进行了尝试：

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

不起作用！

未捕获SyntaxError：意外令牌，
Uncaught ReferenceError：未定义runVideoRain
onloadeddata

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

推荐答案

onloadeddata属性。

You can use the onloadeddata attribute.

onloadeddata：加载媒体数据时运行的脚本

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>

似乎onloadeddata属性在chrome上不起作用。但是通过addEventListener附加事件处理程序确实可以解决问题！

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

这篇关于视频完全缓冲/加载后如何运行js代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！