web-dev-qa-db-fra.com

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

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. Je ne peux tout simplement pas les afficher. #jquerynoob

jqueryhtml5timehtml5-videoduration
35
Cody

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

Remarques:

Toutes les 15 à 250 ms ou à chaque fois que le contrôleur de média du MediaController La position 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 niveau du fichier MediaController.

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

49
Thomas Bratt

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 video, .currentTime devrait fonctionner. Si vous avez besoin de plus de détails, cette page Web devrait pouvoir vous aider.

17
Philip Tinney

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)
12
Mandeep Pasbola

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

Ce site explique comment obtenir l'heure actuelle et la durée totale, indépendamment de la façon dont vous souhaitez l'afficher en utilisant jQuery:

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

Cela couvrira également la manière de le définir sur un div spécifique. Comme philip l'a déjà mentionné, .currentTime vous indiquera où vous en êtes dans la vidéo.

2
Mike Veigel

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;
}
0
Patrick C