视频和旋转木马

问题描述：

我工作的一个项目，我想ο图了这家公司http://weareroyale.com如何管理对他们的网页执行视频横幅文本...视频和旋转木马

我可以看到那里有一个动画我可以看到文本似乎使用透明的PNG，但我似乎无法弄清楚他们如何获得正确的时间？

我的意思是，文本出现在视频的特定部分，但他们如何获得正确的时间？我本来以为加载PNG的速度要比开始的视频要快，我想你可以考虑这个，但对于每个用户来说，加载速度也会不同......

所以，我想知道是否有人知道它是如何创建的？它是一个滑块插件？从头开始创建？等等等？

'video.currentTime'和'svg'的 – AvrilAlejandro

感谢@avrilalejandro - 原来是这样的JavaScript？我猜测，如果该功能可以跟踪视频的时间，那么我们可以创建动作以在特定的时间戳中触发，从显示中更改div（或PNG）：none;当我们希望他们展示的时候 - 是否正确？ –

你会不会知道有什么好的资源来学习这个？ :) –

答

var video = document.getElementById('video'); 
 
//video.load(); 
 
video.play(); 
 
video.addEventListener("timeupdate", function() { 
 
    if (this.currentTime >= 2.000 && this.currentTime <= 8.000){ 
 
    this.pause(); 
 
    document.getElementById('text').innerHTML=this.duration; 
 
    } 
 
}, false);

<video width="400" id="video" controls> 
 
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> 
 
    Your browser does not support HTML5 video. 
 
</video> 
 
<p id="text"></p>

太棒了，谢谢:) –

相关推荐