durée actuelle/durée de la vidéo html5 ?

Question

J'ai besoin d'un moyen d'obtenir la durée totale de la vidéo et l'heure actuelle avec jquery et de l'afficher dans quelques balises <div>.

<div id="current">0:00</div>
<div id="duration">0:00</div>

J'ai cherché toute la journée et je sais comment les obtenir, mais je n'arrive pas à les afficher. #jquerynoob

Answer 1

HTML :

<video
    id="video-active"
    class="video-active"
    width="640"
    height="390"
    controls="controls">
    <source src="myvideo.mp4" type="video/mp4">
</video>
<div id="current">0:00</div>
<div id="duration">0:00</div>

JavaScript :

$(document).ready(function(){
  $("#video-active").on(
    "timeupdate", 
    function(event){
      onTrackedVideoFrame(this.currentTime, this.duration);
    });
});

function onTrackedVideoFrame(currentTime, duration){
    $("#current").text(currentTime); //Change #current to currentTime
    $("#duration").text(duration)
}

Notes :

Toutes les 15 à 250 ms, ou à chaque fois que la position du contrôleur de médias MediaController change, selon ce qui se produit le moins souvent, l'agent utilisateur doit mettre en file d'attente une tâche pour déclencher un événement simple nommé timeupdate au MediaController.

http://www.w3.org/TR/html5/embedded-content-0.html#media-controller-position

Answer 2

Cette page pourrait vous aider. Tout ce que vous devez savoir sur la vidéo et l'audio HTML5

var video = document.createElement('video');
var curtime = video.currentTime;

Si vous avez déjà l'élément vidéo, .currentTime devrait fonctionner. Si vous avez besoin de plus de détails, cette page Web devrait pouvoir vous aider.

Answer 3

Exemple de travail ici à : http://jsfiddle.net/tQ2CZ/1/

HTML

<div id="video_container">
<video poster="http://media.w3.org/2010/05/sintel/poster.png" preload="none" controls="" id="video" tabindex="0">
    <source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" id="mp4"></source>
    <source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" id="webm"></source>
    <source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv" id="ogv"></source>
    <p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>

<div>Current Time : <span  id="currentTime">0</span></div>
<div>Total time : <span id="totalTime">0</span></div>

JS

$(function(){
$('#currentTime').html($('#video_container').find('video').get(0).load());
$('#currentTime').html($('#video_container').find('video').get(0).play());
})
setInterval(function(){
$('#currentTime').html($('#video_container').find('video').get(0).currentTime);
$('#totalTime').html($('#video_container').find('video').get(0).duration);    
},500)

Answer 4

https://www.w3schools.com/tags/av_event_timeupdate.asp

// Get the <video> element with id="myVideo"
var vid = document.getElementById("myVideo");

// Assign an ontimeupdate event to the <video> element, and execute a function if the current playback position has changed
vid.ontimeupdate = function() {myFunction()};

function myFunction() {
// Display the current position of the video in a <p> element with id="demo"
    document.getElementById("demo").innerHTML = vid.currentTime;
}

Answer 5

Je suppose que vous voulez l'afficher en tant que partie du lecteur.

Ce site explique comment obtenir à la fois le temps actuel et le temps total, quelle que soit la manière dont vous souhaitez l'afficher, en utilisant jQuery :

http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/

Nous verrons également comment la définir sur une division spécifique. Comme Philip l'a déjà mentionné, .currentTime vous indiquera où vous vous trouvez dans la vidéo.