Проблема с извлечением продолжительности видео HTML5

Question

ОБНОВЛЕНИЕ: Хорошо, хотя я точно не решил эту проблему, но я нашел способ обойти эту самую большую проблему ... пользовательский опыт.

Сначала видео не начинает загружаться, пока зритель не нажмет кнопку воспроизведения, поэтому я предполагаю, что информация о продолжительности была недоступна для извлечения (я не знаю, как решить эту конкретную проблему ... хотя я предполагаю, что для этого потребуется просто загрузить метаданные видео отдельно от видео, но я даже не знаю, возможно ли это).

Чтобы обойти факт отсутствия данных о продолжительности, я решил полностью скрыть информацию о продолжительности (и фактически весь элемент управления), пока вы не нажмете на игру.

Я знаю ... это обман. Но сейчас это делает меня счастливым:)

Тем не менее ... если кто-нибудь знает, как загрузить метаданные видео отдельно от видеофайла ... пожалуйста, поделитесь. Я думаю, что это должно полностью решить эту проблему.

---

Я работаю над созданием видеоплеера HTML5 с пользовательским интерфейсом, но у меня возникают некоторые проблемы с отображением информации о продолжительности видео.

Мой HTML очень прост (см. Ниже)

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

И javascript, который я использую, чтобы получить и вставить продолжительность

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

Проблема в том, что ничего не происходит. Я знаю, что видеофайл содержит данные о продолжительности, потому что, если я просто использую элементы управления по умолчанию, он отображается нормально.

Но по-настоящему странно, если я добавлю в свой код alert (duration), например,

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

тогда работает нормально (за исключением раздражающего предупреждения, которое появляется). Есть идеи, что здесь происходит или как я могу это исправить?

Answer 1

Сделай это:

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

Срабатывает, когда браузер получает все метаданные из видео.

[править] С тех пор лучшим подходом будет прослушивание «durationchange» вместо «Загруженные метаданные», которые могут быть ненадежными, как таковые:

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

Answer 2

Проблема в браузерах WebKit; метаданные видео загружаются после видео, поэтому они недоступны при запуске JS. Вам нужно запросить атрибут readyState; он имеет ряд значений от 0 до 4, что позволяет узнать, в каком состоянии находится видео; после загрузки метаданных вы получите значение 1.

Так что вам нужно сделать что-то вроде:

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

Я не тестировал этот код, но он (или что-то подобное) должно работать.

Подробнее об атрибутах медиа-элемента можно узнать на developer.mozilla.org .

Answer 3

Спецификация HTML5 допускает только предварительную загрузку метаданных:

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

Это модификация вашего кода

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;

Надеюсь, это поможет.

Похоже, вы используете IE, почему бы вам не использовать document.getElementById метод для извлечения видеообъекта?

Answer 5

не слушайте ни «загруженные метаданные», ни «длительность», video.duration ненадежен.
попробуйте загрузить "https://media.w3.org/2018/10/w3c-particles.webm"

есть умный и эффективный способ.

//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;
};

Answer 6

Я столкнулся с той же проблемой: не могу прочитать продолжительность видео, $('video')[0].duration всегда возвращаю NaN, я сослался на принятый ответ @stopsatgreen и изменил код, чтобы он соответствовал общему случаю, он действительно работает.

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

Код очень прост и действительно работает, поэтому я публикую этот ответ и надеюсь, что он может помочь большему количеству людей.