La récupération de la vidéo HTML5 durée séparément à partir du fichier

Je travaille sur la construction d'un lecteur vidéo HTML5 avec une interface personnalisée, mais je vais avoir quelques problèmes pour obtenir la durée de la vidéo d'information à afficher.

Mon HTML est simple:

<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érez 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 est la durée de données parce que si je viens d'utiliser les contrôles par défaut, il affiche bien.

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

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

puis il fonctionne très bien (moins les fenêtres d'alerte pop-up). Toutes les idées de ce qui se passe ici, ou comment je peux résoudre ce problème?

Mise à JOUR: Ok, donc si je n'ai pas résolu ce problème exactement, mais je n'ai trouver un travail autour de qui gère mon plus gros souci... l'expérience de l'utilisateur.

Tout d'abord la vidéo ne commence pas de chargement jusqu'à ce que après que le visiteur frappe le bouton de lecture, donc je suis en supposant que la durée de l'information n'était pas disponible pour être tiré (je ne sais pas comment résoudre ce problème particulier... même si je suppose que cela impliquerait vient 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 c'est possible).

Afin de contourner le fait qu'il n'existe pas de données sur la durée, j'ai décidé de cacher la durée de l'info (et en fait l'ensemble de contrôle) complètement jusqu'à ce que vous appuyez sur "jouer".

Cela dit, si quelqu'un sait comment faire pour charger les métadonnées de la vidéo séparément à partir du fichier vidéo, s'il vous plaît partager. Je pense que cela devrait résoudre complètement ce problème.

Quel navigateur utilisez-vous pour l'exécution de vos HTML5? Pas tous les navigateurs prend en charge HTML5.
Je ne pense pas que c'est un problème de navigateur. Je suis l'aide de la dernière version de Firefox / Webkit / Chrome pour le tester
Vous pouvez signaler la durée avec un X-Content-Duration en-tête HTTP. Le navigateur peut faire un HEAD demander de recueillir cette information avant le téléchargement de la vidéo. developer.mozilla.org/en/Configuring_servers_for_Ogg_media
Si vous ne video.load() dans le code JavaScript qui sera au moins charger les métadonnées, mais c'est une situation ambiguë. Je souhaite que vous pourriez charge des métadonnées. Je vais avoir des problèmes avec ma recherche de témoins. Elles ne fonctionnent que si l'utilisateur appuie sur play tout d'abord, pour que la vidéo se charger et il est de métadonnées.

InformationsquelleAutor drebabels | 2010-02-08

31

Le problème est dans les navigateurs WebKit; les métadonnées de la vidéo est chargé après la vidéo n'est pas disponible lorsque le JS s'exécute. Vous avez besoin d'interroger l'attribut readyState; c'est une série de valeurs de 0 à 4, vous permettant de connaître l'état de la vidéo est dans; lorsque les métadonnées a chargé de vous obtiendrez une valeur de 1.

De sorte que vous besoin de 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 n'y a plus d'informations à propos des médias, les attributs de l'élément sur developer.mozilla.org.
- Génial... cela fonctionne parfaitement. Merci pour l'aide.
- Voir @Mikushi réponse ci-dessous pour une solution plus propre
- Mon readyState est 4 mais encore, je ne suis pas la durée. pouvez vous s'il vous plaît vérifier ma question https://stackoverflow.com/questions/52167815/html5-video-duration-infinity-while-readystate-4
InformationsquelleAutor stopsatgreen
151

Faire:
```
var myVideoPlayer = document.getElementById('video_player');
myVideoPlayer.addEventListener('loadedmetadata', function() {
    console.log(myVideoPlayer.duration);
});
```
Est déclenchée lorsque le navigateur a reçu toutes les méta-données à partir de la vidéo.

[modifier] Depuis lors, la meilleure approche serait d'écouter 'durationchange' au lieu de 'loadedmetadata", qui peuvent être peu fiables, en tant que tel:
```
myVideoPlayer.addEventListener('durationchange', function() {
    console.log('Duration change', myVideoPlayer.duration);
});
```
- Merci, beaucoup plus propre façon que l'on a accepté de répondre (omi).
- Au lieu de constamment d'interrogation comme dans la accepté de répondre à cette réalité est appelée dès que la vidéo sait que c'est ses métadonnées disponibles. Beaucoup plus propre en effet.
- comment puis-je insérer la durée obtenue à partir de cette dans un span?
- Qu'est-ce que "myVideoPlayer" est-il: var myVideoPlayer = $('#myvideo').get(0); ?
- J'ai confirmé mon hypothèse...c'est ce que videoPlayer évalue trop et que ce code fonctionne!! Merci!
- Cela fonctionne très bien! J'ai quelques vidéos sur ma page et j'aimerais recueillir toutes les durées. Est-il un moyen de le faire dynamiquement (sans copier le code pour chaque vidéo?) Je suis à l'aide de jQuery.
- Ce doit être la accepté de répondre.
- Sa ne fonctionne pas pour moi en Version chrome 49.0.2623.87 m. Quand il obtient déclenché, la durée est toujours l'infini...
- D'accord avec @thedtailer.de ne fonctionne pas avec moi, soit sur Chrome Version 45.0.2454.101 m - j'ai parfois l'NaN, j'ai parfois de la durée réelle.
- Il y a, plus pertinemment, le durationchange événement.
- Voir mon edit pour une meilleure approche. Voir ce JSFiddle pour référence jsfiddle.net/a7491hjw/2
- Mon readyState est 4 mais encore, je ne suis pas la durée. pouvez vous s'il vous plaît vérifier ma question https://stackoverflow.com/questions/52167815/html5-video-duration-infinity-while-readystate-4
InformationsquelleAutor Mikushi

La spec HTML5 ne permettent que de préchargement 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

InformationsquelleAutor Manifest Interactive

2

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;
```
Espère que cette aide.

Il semble que vous utilisez IE, pourquoi n'utilisez-vous pas document.getElementById méthode pour récupérer l'objet vidéo?
- Hey merci pour la réponse. Malheureusement ça ne fonctionne pas... j'ai toujours le même problème où sans appel de l'alerte déclaration... la durée de la vidéo n'est pas "tirer" (il s'affiche en 0) Et je n'ai pas vraiment une raison pour ne pas utiliser getElementById... j'aime juste sélecteurs jQuery donc j'ai été de les utiliser.
- Eh bien, vous avez 2 sources vidéo en 1 balise vidéo, pouvez-vous mettre à chaque source, en vertu de 1 balise vidéo et voir si cela fonctionne?
InformationsquelleAutor Buhake Sindi
0

J'ai rencontré le même problème: impossible de lire les vidéo de la durée , $('video')[0].duration toujours revenir NaN, j'ai évoqué l'on a accepté la réponse de @stopsatgreen et de modifier le code pour l'adapter dans un cas commun, il 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 vraiment travailler, donc je poste cette réponse et j'espère que ça peut aider plus de gens.

InformationsquelleAutor Kevin Yan

ni écouter "loadedmetadata" ou "durationchange", vidéo.la durée n'est pas fiable.

essayez de charge "https://media.w3.org/2018/10/w3c-particles.webm"

il est intelligent et efficace.

//first, seek to a big number time
video.currentTime = 7*24*60*1000;
//then listen 'seeked' event. when this event occur, that means video duration can access normally
video.onseeked = ()=>{
  alert("the duration is: "+video.duration);
  video.onseeked = undefined;
};

InformationsquelleAutor Kent Wood

Vous devez vous connecter pour publier un commentaire.