Problem z pobieraniem wideo HTML5

Question

AKTUALIZACJA: Ok, chociaż nie rozwiązałem dokładnie tego problemu, ale wymyśliłem pracę, która rozwiązuje mój największy problem ... doświadczenie użytkownika.

Po pierwsze wideo nie zaczyna się ładować, dopóki widz nie kliknie przycisku odtwarzania, więc zakładam, że informacja o czasie trwania nie była dostępna do pobrania (nie wiem, jak rozwiązać ten konkretny problem) chociaż zakładam, że wymagałoby to po prostu załadowania metadanych wideo niezależnie od filmu, ale nie wiem nawet, czy to możliwe).

Aby obejść fakt, że nie ma danych o czasie trwania, postanowiłem ukryć informacje o czasie trwania (i właściwie całą kontrolę) do momentu, aż włączysz grę.

Wiem ... oszukuje. Ale na razie sprawia mi to przyjemność :)

To powiedziawszy ... jeśli ktoś wie, jak załadować metadane wideo oddzielnie od pliku wideo ... proszę udostępnij. Myślę, że powinno to całkowicie rozwiązać ten problem.

---

Pracuję nad budowaniem odtwarzacza wideo HTML5 z niestandardowym interfejsem, ale mam pewne problemy z wyświetlaniem informacji o czasie trwania wideo.

Moje HTML jest naprawdę proste (patrz niżej)

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

A javascript Używam dostać i wstawić czas jest

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

Problemem jest to nic się nie dzieje. Wiem, że plik wideo zawiera dane dotyczące czasu trwania, ponieważ jeśli używam domyślnych elementów sterujących, wyświetla się dobrze.

Ale prawdziwy Najdziwniejsze jest to, czy mogę umieścić alert (czas trwania) w moim kodu jak tak

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

następnie działa w porządku (minus przykry alert, że wyskakuje). Wszelkie pomysły, co się tutaj dzieje lub jak mogę to naprawić?

Answer 1

Problem jest w przeglądarkach WebKit; metadane wideo są ładowane po filmie, więc nie są dostępne podczas działania JS. Musisz zapytać o atrybut readyState; ma serię wartości od 0 do 4, informujących o stanie wideo; po wczytaniu metadanych otrzymasz wartość 1.

Więc trzeba zrobić coś takiego:

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

Nie testowane tego kodu, ale powinna ona (lub coś podobnego) działa.

Więcej informacji na temat atrybutów elementów multimedialnych można znaleźć na stronie developer.mozilla.org.

Answer 2

Jest to modyfikacja kodu

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; 

nadzieję, że to pomaga.

Wygląda na to, że używasz IE, dlaczego nie chcesz użyć metody document.getElementById do pobrania obiektu wideo?

Answer 3

uwagi, że:

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

zostanie wywołany gdy przeglądarka otrzymał wszystkie dane meta z filmu.

[edytuj] Od tamtej pory lepszym rozwiązaniem byłoby, aby słuchać „durationchange” zamiast „loadedmetadata”, które mogą być zawodne, jako takich:

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

Answer 4

HTML5 Spec ma umożliwić tylko wstępne ładowanie metadanych:

<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

I napotkał ten sam problem: nie można odczytać czas trwania filmu wideo, $('video')[0].duration zawsze powrócić NaN, odniosłem przyjętej odpowiedź @stopsatgreen i zmień kod tak, aby zmieścił się w zwykłym przypadku, to naprawdę działa.

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

Kod jest bardzo prosty i naprawdę działa, dlatego zamieszczam tę odpowiedź i mam nadzieję, że pomoże ona większej liczbie osób.