Браузеры Фаерфокс и Хромиум. Тег video и вложенный track
Каждый объект TextTrack имеет свойство cues, которое является списком TextTrackCueList, содержащим объекты VTTCue (все метки текущего трека).
Каждый объект VTTCue имеет свойство track, которое является объектом TextTrack. Этот TextTrack — смотрим первый пункт.
Если представить, как дерево
TextTrack
cues[0]
track
cues[0]
track ... и так до неопределенной глубины.
HTML
<video width="400" height="225" id="myVideo" preload="metadata" controls>
<source src="my-video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<track src="track.vtt" default="true" kind="subtitles" srclang="en" label="English">
</video>
Можно открыть инструменты разработчика в браузере, или пройтись скриптом в глубину дерева.
JavaScript
<script>
var headTrack;
// После загрузки окна получаем объект трека
// Навешиваем на него обработчик
window.onload = function() {
var headTrack = myVideo.textTracks[0];
headTrack.addEventListener('cuechange', getAllTracks);
console.log(myVideo.textTracks);
};
// Когда браузер заходит в метку, запускаем основную функцию
function getAllTracks(event) {
var currentTrack = event.target;
getHoleTracks(currentTrack);
}
// Счётчик, чтобы не было бесконечной рекурсии
var counter = 0;
// Извлекаем cues из textTrack
// Извлекаем track из VTTCue
function getHoleTracks(textTrack) {
counter++;
var firstCue = textTrack.cues[0];
var cuesTrack = firstCue.track;
// Вывод в консоль для наглядности
console.log(counter);
console.log('firstCue' + firstCue);
console.log('cuesTrack' + cuesTrack);
// Если последний TextTrack содержит cues, повторяем
// Ограничимся сотней выводов
if (cuesTrack.cues[0] && (counter < 100) ) {
getHoleTracks(cuesTrack);
}
}
</script>
Вопросы
Это что, кроличья нора без дна? Баг или фича?
Влияет ли нагрузку браузера такое дерево объектов или он как-то оптимизирует не создавая его на всю глубину?
Или это я что-то неправильно понимаю?