javascript - the - Problema al recuperar la duración del video HTML5

videojs

Question

ACTUALIZACIÓN: Ok, así que aunque no he resuelto este problema exactamente, pero descubrí un trabajo que maneja mi mayor preocupación ... la experiencia del usuario.

Primero, el video no comienza a cargarse hasta que el usuario acciona el botón de reproducción, por lo que asumo que la información de duración no estaba disponible para ser retirada (no sé cómo solucionar este problema en particular ... aunque asumo que implicaría simplemente cargar los metadatos de video por separado del video, pero ni siquiera sé si eso es posible).

Así que para evitar el hecho de que no hay datos de duración, decidí ocultar la información de duración (y en realidad todo el control) por completo hasta que toque reproducir.

Lo sé ... es hacer trampa. Pero por ahora me hace feliz :)

Dicho eso ... si alguien sabe cómo cargar los metadatos de video por separado del archivo de video ... por favor compártelo. Creo que debería resolver completamente este problema.

Estoy trabajando en la construcción de un reproductor de video HTML5 con una interfaz personalizada, pero estoy teniendo algunos problemas para mostrar la información de duración del video.

Mi HTML es muy simple (ver abajo)

<video id="video" poster="image.jpg" controls>     
    <source src="video_path.mp4" type="video/mp4" />
    <source src="video_path.ogv" type="video/ogg" /> 
</video>
<ul class="controls"> 
<li class="time"><p><span id="timer">0</span> of <span id="duration">0</span></p></li>  
</ul>

Y el javascript que estoy usando para obtener e insertar la duración es

var duration = $(''#duration'').get(0);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;

El problema es que no pasa nada. Sé que el archivo de video tiene los datos de duración porque si solo uso los controles predeterminados, se muestra bien.

Pero lo realmente extraño es si puse alerta (duración) en mi código como tal

alert(duration);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;

entonces funciona bien (menos la alerta molesta que aparece). ¿Alguna idea de lo que está sucediendo aquí o cómo puedo solucionarlo?

Answer 1

El problema está en los navegadores WebKit; los metadatos del video se cargan después del video, por lo que no están disponibles cuando se ejecuta el JS. Necesita consultar el atributo readyState; esto tiene una serie de valores de 0 a 4, que le permite saber en qué estado se encuentra el video; cuando los metadatos se hayan cargado, obtendrás un valor de 1.

Entonces necesitas hacer algo como:

window.setInterval(function(t){
  if (video.readyState > 0) {
    var duration = $(''#duration'').get(0);
    var vid_duration = Math.round(video.duration);
    duration.firstChild.nodeValue = vid_duration;
    clearInterval(t);
  }
},500);

No probé ese código, pero debería funcionar (o algo así).

Hay más información sobre los atributos de elementos de medios en developer.mozilla.org .

Answer 2

Esta es la modificación de tu código

var duration = document.getElementById("duration");
var vid_duration = Math.round(document.getElementById("video").duration);
//alert(vid_duration);
duration.innerHTML = vid_duration;
//duration.firstChild.nodeValue = vid_duration;

Espero que esto ayude.

Parece que estás usando IE, ¿por qué no usas el método document.getElementById para recuperar el objeto de video?

Answer 3

Haz eso:

var myVideoPlayer = document.getElementById(''video_player'');
myVideoPlayer.addEventListener(''loadedmetadata'', function() {
    console.log(myVideoPlayer.duration);
});

Se activa cuando el navegador recibe todos los metadatos del video.

[edit] Desde entonces, el mejor enfoque sería escuchar ''durationchange'' en lugar de ''loadedmetadata'', que puede no ser confiable, como tal:

myVideoPlayer.addEventListener(''durationchange'', function() {
    console.log(''Duration change'', myVideoPlayer.duration);
});

Answer 4

La especificación HTML5 solo permite precargar los metadatos:

<video id="video" poster="image.jpg" controls preload="metadata">     
    <source src="video_path.mp4" type="video/mp4" />
    <source src="video_path.ogv" type="video/ogg" /> 
</video>

http://www.w3.org/TR/html-markup/video.html#video.attrs.preload

Answer 5

Me encontré con el mismo problema: no puedo leer la duración del video, $(''video'')[0].duration siempre devuelve NaN , me referí a la respuesta aceptada de @stopsatgreen y cambié el código para encajar en un caso común, realmente funciona.

var video = $(''video'')[0];
var t = setInterval(function () {
    if(video.readyState > 0) {
        var duration = video.duration;
        console.log(duration);
        clearInterval(t);
    }
}, 500);

El código es muy simple y realmente funciona, así que publico esta respuesta y espero que pueda ayudar a más personas.