視頻和旋轉木馬

我工作的一個項目，我想ο圖了這家公司http://weareroyale.com如何管理對他們的網頁執行視頻橫幅文本...視頻和旋轉木馬

我可以看到那裏有一個動畫我可以看到文本似乎使用透明的PNG，但我似乎無法弄清楚他們如何獲得正確的時間？

我的意思是，文本出現在視頻的特定部分，但他們如何獲得正確的時間？我本來以爲加載PNG的速度要比開始的視頻要快，我想你可以考慮這個，但對於每個用戶來說，加載速度也會不同......

所以，我想知道是否有人知道它是如何創建的？它是一個滑塊插件？從頭開始創建？等等等？

2017-05-07 Shaun Taylor

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

來源

2017-05-08 14:48:09 AvrilAlejandro

太棒了，謝謝:) –

視頻和旋轉木馬

回答

相關問題