Question

我已经在谷歌搜索了这个，并没有做它应该做的事情它在IE中工作得很完美......你可以在日志中看到它的工作原理...但它不会在chrome中工作！为什么它在chrome中这样做？ ......它从catche加载10sek然后什么都没有...

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

也许有人有另一种方法可以做到这一点？当视频完全加载时...应该运行...

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>

不起作用!!

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

Answer 1

您可以使用onloadeddata属性。

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

<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附加事件处理程序可以解决问题！

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

如何在视频完全缓冲/加载时运行js代码

1 个答案: