wake-up-neo.net

Problem beim Abrufen der HTML5-Videodauer

UPDATE: Ok also, obwohl ich dieses Problem nicht genau gelöst habe, habe ich aber eine Lösung gefunden, die meine größten Sorgen um die Benutzererfahrung erledigt.

Zunächst wird das Video erst geladen, nachdem der Betrachter auf die Wiedergabetaste geklickt hat. Daher gehe ich davon aus, dass die Dauerinformationen nicht abgerufen werden konnten (ich weiß nicht, wie Sie dieses Problem beheben können ... obwohl ich davon ausgehe Dazu müssten einfach die Videometadaten getrennt vom Video geladen werden, aber ich weiß gar nicht, ob das möglich ist.

Um die Tatsache zu umgehen, dass es keine Dauerdaten gibt, habe ich mich dazu entschieden, die Dauerinformationen (und eigentlich das gesamte Steuerelement) vollständig auszublenden, bis Sie auf play drücken.

Ich weiß ... es ist Betrug. Aber jetzt macht es mich glücklich :)

Das heißt, wenn jemand weiß, wie man die Video-Metadaten getrennt von der Videodatei lädt, ... bitte teilen. Ich denke, das sollte dieses Problem vollständig lösen.


Ich arbeite am Aufbau eines HTML5-Videoplayers mit einer benutzerdefinierten Benutzeroberfläche, habe jedoch Probleme, die Videodauerinformationen anzuzeigen.

Mein HTML ist sehr einfach (siehe unten)

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

Und das Javascript, das ich benutze, um die Dauer zu erhalten und einzufügen

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

Das Problem ist, dass nichts passiert. Ich weiß, dass die Videodatei die Dauerdaten hat, denn wenn ich nur die Standardsteuerelemente verwende, wird sie gut angezeigt.

Aber das Seltsame ist, wenn ich den Code so in den Code meldet

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

dann funktioniert es gut (abzüglich der ärgerlichen Warnung). Irgendwelche Ideen, was hier passiert oder wie ich es reparieren kann?

47
drebabels

Das Problem liegt in WebKit-Browsern. Die Video-Metadaten werden nach dem Video geladen und sind daher nicht verfügbar, wenn der JS ausgeführt wird. Sie müssen das readyState-Attribut abfragen. Dies hat eine Reihe von Werten von 0 bis 4, sodass Sie wissen, in welchem ​​Zustand sich das Video befindet. Wenn die Metadaten geladen sind, erhalten Sie den Wert 1.

Sie müssen also etwas tun wie:

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

Ich habe den Code nicht getestet, aber er sollte funktionieren.

Weitere Informationen zu Medienelementattributen finden Sie unter developer.mozilla.org .

31
stopsatgreen

TU das:

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

Wird ausgelöst, wenn der Browser alle Metadaten vom Video empfängt.

[edit] Seitdem wäre es besser, 'durationchange' anstelle von 'loadedmetadata' zu hören, was unzuverlässig sein kann:

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

Die HTML5-Spezifikation ermöglicht nur das Vorladen der Metadaten:

<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

Dies ist die Änderung Ihres Codes

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;

Hoffe das hilft.

Anscheinend verwenden Sie den IE. Warum verwenden Sie nicht die document.getElementById-Methode zum Abrufen von Videoobjekten?

3
Buhake Sindi

weder "loadedmetadata" noch "durationchange" anhören, video.duration ist unzuverlässig.
try load " https://media.w3.org/2018/10/w3c-particles.webm "

es gibt einen intelligenten und effektiven Weg.

//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;
};
0
Kent Wood

Ich bin auf das gleiche Problem gestoßen: Ich kann die Dauer des Videos nicht lesen. $('video')[0].duration gibt immer NaN zurück. Ich habe die akzeptierte Antwort von @stopsatgreen verwiesen und den Code geändert, damit er in einen allgemeinen Fall passt. 

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

Der Code ist sehr einfach und funktioniert wirklich, deshalb poste ich diese Antwort und hoffe, dass er mehr Menschen helfen kann.

0
Kevin Yan