web-dev-qa-db-fra.com

Problème lors de la récupération de la durée de la vidéo HTML5

UPDATE: Ok donc bien que je n’aie pas résolu ce problème exactement, mais j’ai trouvé un moyen de contourner le problème qui me préoccupe le plus: l’utilisateur.

Premièrement, le chargement de la vidéo ne commence qu'après que le spectateur ait cliqué sur le bouton de lecture. Je suppose donc que les informations de durée n'étaient pas disponibles pour être extraites (je ne sais pas comment résoudre ce problème particulier ... bien que je suppose cela impliquerait simplement de charger les métadonnées de la vidéo séparément de la vidéo, mais je ne sais même pas si cela est possible).

Donc, pour contourner le fait qu'il n'y a pas de données de durée, j'ai décidé de cacher complètement les informations de durée (et en fait le contrôle complet) jusqu'à ce que vous appuyiez sur Play.

Je sais ... c'est tricher. Mais pour l'instant ça me fait plaisir :)

Cela dit ... si quelqu'un sait comment charger les métadonnées de la vidéo séparément du fichier vidéo ... veuillez les partager. Je pense que cela devrait résoudre complètement ce problème.

Je travaille à la création d'un lecteur vidéo HTML5 avec une interface personnalisée, mais je ne parviens pas à obtenir les informations sur la durée de la vidéo.

Mon HTML est très simple (voir ci-dessous)

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

Et le javascript que j'utilise pour obtenir et insérer la durée est

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

Le problème est que rien ne se passe. Je sais que le fichier vidéo contient les données de durée, car si je ne me sers que des commandes par défaut, cela s’affiche correctement.

Mais la vraie chose étrange est si je mets alerte (durée) dans mon code comme si

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

alors cela fonctionne très bien (moins l'alerte agaçante qui apparaît). Des idées sur ce qui se passe ici ou comment je peux y remédier?

javascriptvideohtml5
47
drebabels

Le problème est dans les navigateurs WebKit; les métadonnées vidéo sont chargées après la vidéo et ne sont donc pas disponibles lors de l'exécution du JS. Vous devez interroger l'attribut readyState; Cela a une série de valeurs de 0 à 4, vous permettant de savoir dans quel état se trouve la vidéo; une fois les métadonnées chargées, vous obtenez une valeur de 1.

Donc, vous devez faire quelque chose comme:

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

Je n'ai pas testé ce code, mais cela (ou quelque chose du genre) devrait fonctionner.

Vous trouverez plus d'informations sur les attributs des éléments multimédias dans developer.mozilla.org .

31
stopsatgreen

Faire ça:

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

Se déclenche lorsque le navigateur a reçu toutes les métadonnées de la vidéo.

[edit] Depuis lors, la meilleure approche serait d'écouter 'durationchange' au lieu de 'Loadmetadata' qui peut ne pas être fiable, en tant que tel:

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

La spécification HTML5 ne permet de précharger que les métadonnées:

<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

3
Manifest Interactive

Ceci est la modification de votre code

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;

J'espère que cela t'aides.

On dirait que vous utilisez IE, pourquoi n'utilisez-vous pas la méthode document.getElementById pour récupérer un objet vidéo?

3
Buhake Sindi

J'ai rencontré le même problème: impossible de lire la durée de la vidéo, $('video')[0].duration retournant toujours NaN, j'ai référé la réponse acceptée de @stopsatgreen et modifié le code pour l'adapter à un cas courant, cela fonctionne vraiment. 

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

Le code est très simple et fonctionne vraiment, alors je poste cette réponse et espère que cela pourra aider davantage de personnes.

0
Kevin Yan