span - jquery textarea value

hora actual/duración del video html5?

Question

Necesito una forma de obtener la duración total del video y la hora actual con jquery y mostrarlo en un par de etiquetas <div>.

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

He estado buscando todo el día y sé cómo obtenerlos. Simplemente no puedo mostrarlos. #jquerynoob

Answer 1

Ejemplo de trabajo aquí en: 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 2

Esta página podría ayudarte. Todo lo que necesita saber sobre video y audio HTML5

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

Si ya tiene el elemento de video, .currentTime debería funcionar. Si necesita más detalles, esa página web debería ser capaz de ayudar.

Answer 3

Supongo que quieres mostrar esto como parte del reproductor.

Este sitio desglosa cómo obtener tanto el tiempo actual como el total independientemente de cómo quiera mostrarlo usando jQuery:

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

Esto también cubrirá cómo establecerlo en un div específico. Como ya ha mencionado philip, .currentTime te mostrará dónde estás en el video.

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

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

Notas:

Cada 15 a 250 ms, o cada vez que cambia la posición del controlador de medios del MediaController, lo que ocurra con menos frecuencia, el agente de usuario debe poner en cola una tarea para activar un evento simple denominado timeupdate en el MediaController.

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