Media Video Player HTML5 JS

Question

Ich möchte die Dauer meines Videos und die tatsächliche Zeit zeigen.

Dafür verwende ich HTMLMediaElement API in JS.

Alles funktioniert (spielen, Pause, Neustart, ...) aber die Dauer und die aktuelle Zeit funktionieren nicht und ich weiß nicht warum. Ich habe nicht in der Regel Code in JS also bitte fein ^^

Dies ist mein Code:

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

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

Eigentlich

Ich möchte nur aktuelle Uhrzeit und Dauer zeigen

Edit: so jetzt Ok ich habe das: Für die aktuelle Zeit

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

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

aber jetzt mein Problem ist, dass ich [ObjectHTMLSpanElement] anstelle von 00.00 und NaN statt 20.03 ...

Answer 1

Ich schlage vor, Sie js Code in einer oncanplay Funktion initialisieren, die aufgerufen wird sobald das Video abgespielt werden kann.

Für die Zeit, was würde ich einen separaten Timer, der es das Video Zeit entsprechend jede Sekunde und Updates überprüft ein:

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>