Получение продолжительности видео HTML5 отдельно из файла
Я работаю над созданием видеоплеера 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);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;
затем это хорошо работает (минус раздражающее предупреждение, которое открывается). Какие-либо идеи, что происходит здесь или как я могу зафиксировать его?
ОБНОВЛЕНИЕ: хорошо поэтому, хотя я не решил эту проблему точно, но я действительно выяснял, что работа вокруг этого обрабатывает мое самое большое беспокойство... пользовательский опыт.
Сначала видео не начинает загружаться, пока средство просмотра не поражает кнопку воспроизведения, таким образом, я предполагаю, что информация о продолжительности не была доступна, чтобы быть вытянутой (я не знаю, как устранить эту конкретную проблему..., хотя я предполагаю, что это включило бы просто загрузку метаданных видео отдельно от видео, но я даже не знаю, возможно ли это).
Таким образом для обхождения того, что нет никаких данных продолжительности я решил скрыть информацию о продолжительности (и на самом деле все управление) полностью, пока Вы не поражаете игру.
Тем не менее, если кто-либо знает, как загрузить метаданные видео отдельно из видеофайла, совместно используйте. Я думаю, что это должно полностью решить эту проблему.
3 ответа
Проблема заключается в браузерах 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 .
Это модификация вашего кода
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 для получения видеообъекта?
Сделайте следующее:
var myVideoPlayer = document.getElementById('video_player');
myVideoPlayer.addEventListener('loadedmetadata', function() {
console.log(myVideoPlayer.duration);
});
Запускается, когда браузер получает все метаданные из видео.
[править] С тех пор лучшим подходом было бы слушать 'durationchange' вместо 'loadedmetadata', которое может быть ненадежным, как таковое:
myVideoPlayer.addEventListener('durationchange', function() {
console.log('Duration change', myVideoPlayer.duration);
});