Problème de récupération de la durée de la vidéo HTML5
Mise à jour: Ok donc bien que je n'ai pas résolu ce problème exactement, mais j'ai trouvé un travail qui gère ma plus grande préoccupation... l'expérience de l'utilisateur.
Tout d'abord, la vidéo ne commence à se charger qu'après que le spectateur a cliqué sur le bouton de lecture, donc je suppose que les informations de durée n'étaient pas disponibles pour être tirées (Je ne sais pas comment résoudre ce problème particulier... bien que je suppose que cela impliquerait simplement de charger les métadonnées vidéo séparément de la vidéo, mais je ne le fais même pas savoir si c'est possible).
Donc, pour contourner le fait qu'il n'y a pas de données de durée, j'ai décidé de masquer complètement les informations de durée (et en fait tout le contrôle) jusqu'à ce que vous frappiez play.
Je sais... son tricherie. Mais pour l'instant ça me rend heureux:)
Cela dit... si quelqu'un sait comment charger les métadonnées vidéo séparément du fichier vidéo... s'il vous plaît partager. Je pense que cela devrait complètement résoudre ce problème.
Je travaille sur la construction D'un lecteur vidéo HTML5 avec une interface personnalisée, mais j'ai quelques problèmes pour afficher les informations de durée 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 a les données de durée car si j'utilise simplement les contrôles par défaut, il s'affiche bien.
Mais la vraie chose étrange est si je mets alert (duration) dans mon code comme ceci
alert(duration);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;
Alors est-ce que fonctionne bien (moins l'alerte ennuyeuse qui apparaît). Des idées sur ce qui se passe ici ou comment je peux le réparer?
5 réponses
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 lorsque le JS s'exécute. 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; lorsque les métadonnées ont été chargées, vous obtiendrez une valeur de 1.
Vous devez donc 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 il (ou quelque chose comme ça) devrait fonctionner.
Il y a plus d'informations sur media element attributs sur developer.mozilla.org .
Faites cela:
var myVideoPlayer = document.getElementById('video_player');
myVideoPlayer.addEventListener('loadedmetadata', function() {
console.log(myVideoPlayer.duration);
});
Se déclenche lorsque le navigateur reçoit toutes les métadonnées de la vidéo.
[edit] depuis lors, la meilleure approche serait d'écouter 'durationchange' au lieu de 'loadedmetadata' qui peut être peu fiable, en tant que tel:
myVideoPlayer.addEventListener('durationchange', function() {
console.log('Duration change', myVideoPlayer.duration);
});
C'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 aide.
Il semble que vous utilisiez IE, pourquoi n'utilisez-vous pas la méthode document.getElementById pour récupérer l'objet vidéo?
La spécification HTML5 ne permet que de précharger 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
J'ai rencontré le même problème: ne peut pas lire la durée de la vidéo, {[1] } toujours retourner NaN, j'ai renvoyé la réponse acceptée de @stopsatgreen et changer le code pour s'adapter à un cas commun, ça marche 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, donc je poste cette réponse et j'espère que cela peut aider plus de gens.