Media video player HTML5 JS

Question

Я хотел бы показать продолжительность моего видео и фактическое время.

Для этого я использую API HTMLMediaElement в JS.

Все работает (воспроизведение, пауза, перезагрузка, ...), но продолжительность и текущее время не работают, и я не знаю почему. Я не обычно код в JS поэтому, пожалуйста, хорошо ^^

Это мой код:

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

На самом деле я просто хочу, чтобы показать текущее время и продолжительность

Edit: Ok, так что теперь у меня есть что: Для текущего времени

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

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

Но теперь моя проблема заключается в том, что у меня есть [ObjectHTMLSpanElement] вместо 0:00 и NaN вместо 20:03 ...

Answer 1

Я предлагаю вам инициализировать код JS в oncanplay функцию, которая будет вызываться как только видео может воспроизводиться.

За время вещь, я бы создал отдельный таймер, который проверяет время видео каждый второй и обновления его соответствующим образом:

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>