[ОБНОВЛЕНО] Используя обещания, мы можем предварительно загрузить метаданные видео и сохранить их в массиве. Здесь я использовал локальное хранилище для хранения временного массива и позже использовал его окончательную сумму. В противном случае мы получим 0 из-за асинхронности предварительной загрузки метаданных, которая еще не завершена!
Таким образом, вы можете отделить все это от вашего кода ползунка и просто использовать totalTime=(JSON.parse(localStorage.getItem('durations'))).reduce((a, b) => a + b, 0);
.
function Preload(){
var slides = document.querySelectorAll('video');
return new Promise(function (resolve) {
var ready = 0;
var videosDura = [];
slides.forEach(function (v) {
v.addEventListener('loadedmetadata', function () {
videosDura.push(Math.round(v.duration));
ready++;
localStorage.setItem("durations", JSON.stringify(videosDura));
if (ready === slides.length) {
$('.preloader').fadeOut('slow');
resolve();
}
});
});
}).then(function () {
console.log((JSON.parse(localStorage.getItem('durations'))).reduce((a, b) => a + b, 0));
// Call any function dependant on this Variable
});
}
$(document).ready(function () {
Preload();
});
Существует другой подход к проверке видео с использованием свойства videoObject.readyState .
В этой скрипке вы можете проверить ожидаемый результат.
Для производительности и оптимизации, учитывая пропускную способность, скорость загрузки страниц, совместимость и мобильные устройства ... Я предлагаю вам прочитать сначала эту статью во время работы над вашим реальным проектом.
Наилучший подход к использованию метаданных видео - использовать API для вызовов ajax или предварительно сохранить его на стороне сервера. Некоторые проекты мета-генератора на Github: