メディア動画プレーヤーHTML5 JS

Question

動画の再生時間と実際の時間を表示したい場合は、

私はJSのHTMLMediaElement APIを使用しています。

すべてが動作しています（再生、一時停止、再起動、など）が、再生時間と現在の時間は機能していません。理由はわかりません。

<div class="wrap_video"> 
    <video id="video" width="298" height="240"> 
     <source src="videos/windowsill.mp4" type="video/mp4"> 
     Désolé, votre navigateur ne vous permet pas de visualiser cette vidéo. 
    </video> 
</div> 

<div class="datas"> 
     <span id="currentTime"><script>document.write(currentTime);</script></span> 
     <span id="duration"><script>document.write(duration);</script></span> 
</div> 

<div id="buttonbar"> 
     <button id="restart" class="btn btn-default" onclick="restart();"> 
      <span class="glyphicon glyphicon-repeat"></span> 
     </button> 

     <button id="rewind" class="btn btn-default" onclick="skip(-10)"> 
      <span class="glyphicon glyphicon-fast-backward"></span><!--&lt;&lt;--> 
     </button> 

     <button id="play" class="btn btn-default" onclick="playPause()"> 
      <span class="glyphicon glyphicon-play"></span><!--&gt;--> 
     </button> 

     <button id="fastForward" class="btn btn-default" onclick="skip(10)"> 
      <span class="glyphicon glyphicon-fast-forward"></span> 
     </button> 
    </div> 
</div> 

そして、私のJS：

/** 
* Play or Pause the video 
*/ 
function playPause() { 

var video = document.getElementById("video"); 
var button = document.getElementById("play"); 
var currentTime = 0; 
currentTime += document.getElementById("video").currentTime; 
var duration = document.getElementById("video").duration; 

if (video.paused) { 
    video.play(); 
    button.innerHTML = "<span class=\"glyphicon glyphicon-pause\"></span>"; 
} else { 
    video.pause(); 
    button.innerHTML = "<span class=\"glyphicon glyphicon-play\"></span>"; 
    } 
} 

/** 
* Restart the video 
*/ 
function restart() { 
    var video = document.getElementById("video"); 
    video.currentTime = 0; 
} 

/** 
* Skip the video to the given value 
* 
* @param int value The value 
*/ 
function skip(value) { 
    var video = document.getElementById("video"); 
    video.currentTime += value; 
} 

は、実際に私はただ、現在の時刻と期間

を表示したい私はこれが私のコードです^^

罰金してください通常、JSのコードをいけません

編集： これで今私はそれを持っています：

setInterval(function() { 
document.getElementById("currentTime").innerHTML = document.getElementById("video").currentTime; 
}, 1000); 

var duration = document.getElementById("video").duration; 
document.getElementById("duration").innerHTML = duration; 

しかし、今私の問題は、私が代わりに代わり20：03の午後12時とはNaNの[ObjectHTMLSpanElement]持っているということです...

Answer 1

私はあなたが呼び出されますoncanplay機能であなたのJSコードを初期化提案ビデオが再生されるとすぐに時間の事については

、私は、ビデオの時間を秒ごとにチェックし、それに応じて更新し、別のタイマー設定になります。

var vid = document.querySelectorAll("video")[0]; 
 
var current = document.getElementById("current"); 
 
var total = document.getElementById("total"); 
 

 
vid.oncanplay = function() { 
 
    vid.ontimeupdate = function() { 
 
    current.innerHTML = Math.floor(vid.currentTime) + "s"; 
 
    total.innerHTML = Math.floor(vid.duration) + "s"; 
 
    } 
 
}

.wrapper { 
 
    position: relative; 
 
} 
 

 
p { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    border: 2px solid black; 
 
    background: white; 
 
    margin: 0; 
 
    padding: 5px; 
 
}

<div class="wrapper"> 
 
    <video width="400" controls> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> 
 
    Your browser does not support HTML5 video. 
 
    </video> 
 
    <p> 
 
    Current time: <span id="current"></span><br /> 
 
    Total time: <span id="total"></span> 
 
    </p> 
 
</div>