Javascript現在時刻機能

Question

ビデオの現在時刻を表示するカスタムビデオコントロールを取得しようとしています。しかし、私はそれを機能させることはできません。私のコードでは何が分かりませんか？

Javascriptのコード

var time = document.getElementById("current"); 

time.addEventListener("timeupdate", currentTime, true); 

// Current time function 

function currentTime() { 

    var currentMinutes = Math.floor(video.currentTime/60); 
    var currentSeconds = Math.floor(video.currentTime - currentMinutes * 60); 


    time.innerHTML = currentMinutes + ":" + currentSeconds;  
} 

HTML5

<div id="time"> 
    <span id="current">00:00</span> 
    <span id="duration">00:00</span> 
</div> 

Answer 1

あなたがイベントオフイベントトリガを持っている必要があります。動画を使用しているので、私はビデオontimeupdateイベントを使用します。

時間の表示に問題があるようです。 https://jsfiddle.net/83peL34r/

Javascriptを：しかし、私はこのフィドルにここで働い映像イベントのものを得た

var time = document.getElementById("current"); 
var video = document.getElementById("video"); 

time.addEventListener("timeupdate", currentTime, true); 
video.ontimeupdate = function() {currentTime()}; 

// Current time function 

function currentTime() { 

    var currentMinutes = Math.floor(video.currentTime/60); 
    var currentSeconds = Math.floor(video.currentTime - currentMinutes * 60); 


    time.innerHTML = currentMinutes + ":" + currentSeconds; 

} 

HTML：

<video id="video" width="400" controls> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
</video> 
<div id="time"> 
    <span id="current">00:00</span> 
    <span id="duration">00:00</span> 
</div> 

編集：私はあなたをさらに少しを得るためにいくつかの変更を加えました。この中で、それは持続時間をつかみ、それを継続時間セクションに入れます。秒が10未満の場合は、その前に0が表示されます。

https://jsfiddle.net/83peL34r/1/

Answer 2

私はあなたがこのような何かがあると仮定：

<video id="myVideo" width="320" height="176" controls> 
    <source src="mov_bbb.mp4" type="video/mp4"/> 
    <source src="mov_bbb.ogg" type="video/ogg"/> 
</video> 

<div id="time"> 
    <span id="current">00:00</span> 
    <span id="duration">00:00</span> 
</div> 

は、この操作を行います。あなたのコードで

var video = document.getElementById('myVideo'); 
var currentTime = document.getElementById('current'); 
video.addEventListener('timeupdate', function() { 
    var currentMinutes = Math.floor(video.currentTime/60); 
    var currentSeconds = Math.floor(video.currentTime - currentMinutes * 60); 

    currentTime.innerHTML = currentMinutes + ":" + currentSeconds; 
}); 

を、あなたのスパンにtimeupdateイベントリスナを追加しました。それをvideo要素に追加する必要があります。