Firefox and Chromium browsers. Video tag and embedded track

  1. Each TextTrack object has a cues property, which is a TextTrackCueList containing VTTCue objects (all labels of the current track).

  2. Each VTTCue object has a track property, which is a TextTrack object. This TextTrack - see the first item.

If you imagine a tree

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>

You can open the developer tools in the browser, or go through the script in the depth of the tree.

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>

Questions

  • Is that a rabbit hole without a bottom? Bug or feature?

  • Does the browser load affect such a tree of objects or does it somehow optimize without creating it to the full depth?

  • Or am I misreading something?

    3 answers 3

    The track property is just a link to the TextTrack parent object. This is very easy to check: you need to add some additional property in myVideo.textTracks [0] and see if it was added to all nested objects (added). It turns out that there is no rabbit hole - you walked in a circle

      It seems that I too literally perceive the visual image from the developer’s tools in the browser. Always hard to understand links and pointers. I can not imagine a visual analogy.

      Screenshot of the developer tools console

        There is such a coherent list data structure. On js it is not difficult to implement, and take a special case, a bidirectional linked list. This is a list where each item has a link to the parent item and the child item.

        Create a list of two objects:

         const obj1 = { value : 1, parent: null, child: null } const obj2 = { value : 2, parent: null, child: null } // свяжем эти два объекта obj1.child = obj2 obj2.parent = obj1

        And so we created circular references , because the sv- parent of obj2 refers to obj1 , which has sv-of child , which refers to obj2

        How it looks in the console: enter image description here

        It would seem that it should take up infinitely a lot of memory, but the browser engine is not so stupid. Therefore, it does not store the object itself (its copy), but, roughly speaking, the address in memory, passing through which you can get the necessary data. Thus, we do not produce infinite entities, but use links to access objects in the Holy Island.

        Similarly, with the DOM structure, each element has a parent- parentNode , which refers to a parent element, in turn, the parent element has a parent parentNode refers back to the parent element)))

        For obvious reasons, such objects are difficult to imagine in the form of JSON (the error seems to hint)

        enter image description here

        • Now I seem to understand. Did a similar in the file system. The Parent folder contains the Children folder. In the Children folder there is a link to the Parent folder. - Dmitry Sedov