HTML::O...rackList(3)

💖 NAME 💖

okay so bestie, this is the HTML::O...rackList(3) page — yep, that’s the manual name, User Contributed Perl Documentation — and it’s all about HTML::Object::DOM::VideoTrackList: the HTML Object DOM VideoTrackList Class. periodt.

---

✨ SYNOPSIS ✨

Here’s the starter pack, copy-paste core:

use HTML::Object::DOM::VideoTrackList;
my $list = HTML::Object::DOM::VideoTrackList->new ||
    die( HTML::Object::DOM::VideoTrackList->error, "\n" );

---

💫 VERSION 💫

v0.2.0 — that’s the version, bestie. 💅

---

🌸 DESCRIPTION 🌸

The VideoTrackList interface is used to represent a list of the video tracks contained within a <video> element, with each track represented by a separate VideoTrack object in the list.

It inherits from HTML::Object::EventTarget — family tree tea. 🫶

---

🦋 INHERITANCE 🦋

The inheritance chain is giving nepo baby, and here it is exactly:

+-----------------------+     +---------------------------+     +-------------------------+     +-----------------------------------+
| HTML::Object::Element | --> | HTML::Object::EventTarget | --> | HTML::Object::DOM::List | --> | HTML::Object::DOM::VideoTrackList |
+-----------------------+     +---------------------------+     +-------------------------+     +-----------------------------------+

---

🎀 PROPERTIES 🎀

Inherits properties from its parent HTML::Object::DOM::List — yes, the whole lineage.

🌟 length 🌟

The number of tracks in the list. That’s the vibe.

Example:

my $videoElem = $doc->querySelector( 'video' );
my $numVideoTracks = 0;
if( $videoElem->videoTracks )
{
    $numVideoTracks = $videoElem->videoTracks->length;
}

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/length

🌟 selectedIndex 🌟

Sets or gets a number. Under perl, this is not set automatically. It is up to you to set this to whatever number you see fit.

Under JavaScript, this is the index of the currently selected track, if any, or −1 otherwise.

It returns the number as an object.

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/selectedIndex

🌟 selectedindex 🌟

Alias for selectedIndex — same thing, lowercase era.

---

🛠️ METHODS 🛠️

Inherits methods from its parent HTML::Object::DOM::List. Let’s go through them, no cap:

💅 addEventListener 💅

Calls and returns the value from addEventListenerCalls in the ancestor class HTML::Object::DOM::List.

💅 children 💅

Returns an array object of this element’s children. Cute.

💅 forEach 💅

This is an alias for foreach in Module::Generic::Array.

💅 getTrackById 💅

Returns the VideoTrack found within the VideoTrackList whose id matches the specified string. If no match is found, undef is returned. No match, no track, bestie.

Example:

my $theTrack = $VideoTrackList->getTrackById( $id );

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/getTrackById

---

🎉 EVENTS 🎉

Events fired are of class HTML::Object::DOM::TrackEvent — okay, event class noted. 💅

🔥 addtrack 🔥

Fired when a new video track has been added to the media element. Also available via the onaddtrack property.

Example:

my $videoElement = $doc->querySelector('video');

$videoElement->videoTracks->addEventListener( addtrack => sub
{
    my $event = shift( @_ );
    say( "Video track: ", $event->track->label, " added" );
});

Or the property route:

my $videoElement = $doc->querySelector('video');

$videoElement->videoTracks->onaddtrack = sub
{
    my $event = shift( @_ );
    say( "Video track: ", $event->track->label, " added" );
};

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/addtrack_event

🔥 change 🔥

Fired when a video track has been made active or inactive. Also available via the onchange property.

Example:

my $videoElement = $doc->querySelector( 'video' );
$videoElement->videoTracks->addEventListener( change => sub
{
    say( "'", $event->type, "' event fired" );
});

# changing the value of 'selected' will trigger the 'change' event
my $toggleTrackButton = $doc->querySelector( '.toggle-$track' );
$toggleTrackButton->addEventListener( click => sub
{
    my $track = $videoElement->videoTracks->[0];
    $track->selected = !$track->selected;
});

Then the property style:

my $videoElement = $doc->querySelector( 'video' );
$videoElement->videoTracks->onchange = sub
{
    my $event = shift( @_ );
    say( "'", $event->type, "' event fired" );
};

# changing the value of 'selected' will trigger the 'change' event
my $toggleTrackButton = $doc->querySelector( '.toggle-$track' );
$toggleTrackButton->addEventListener( click => sub
{
    my $track = $videoElement->videoTracks->[0];
    $track->selected = !$track->selected;
});

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/change_event

🔥 removetrack 🔥

Fired when a new video track has been removed from the media element. Also available via the onremovetrack property.

Example:

my $videoElement = $doc->querySelector( 'video' );

$videoElement->videoTracks->addEventListener( removetrack => sub
{
    my $event = shift( @_ );
    say( "Video track: ", $event->track->label, " removed" );
});

Then the property style:

my $videoElement = $doc->querySelector( 'video' );

$videoElement->videoTracks->onremovetrack = sub
{
    my $event = shift( @_ );
    say( "Video track: ", $event->track->label, " removed" );
};

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/removetrack_event

---

🎧 EVENT HANDLERS 🎧

These are the handler properties — set a sub and let it cook. 🍓

👑 onaddtrack 👑

An event handler to be called when the addtrack event is fired, indicating that a new video track has been added to the media element.

Example:

$doc->querySelector('video')->videoTracks->onaddtrack = sub
{
    my $event = shift( @_ );
    addToTrackList( $event->track );
};

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/onaddtrack

👑 onchange 👑

An event handler to be called when the change event occurs — that is, when the value of the selected property for a track has changed, due to the track being made active or inactive.

Example:

my $trackList = $doc->querySelector( 'video' )->videoTracks;
$trackList->onchange = sub
{
    my $event = shift( @_ );
    $trackList->forEach(sub
    {
        my $track = shift( @_ );
        updateTrackSelectedButton( $track->id, $track->selected );
    });
};

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/onchange

👑 onremovetrack 👑

An event handler to call when the removetrack event is sent, indicating that a video track has been removed from the media element.

Example:

$doc->querySelector( 'my-video' )->videoTracks->onremovetrack = sub
{
    $myTrackCount = $doc->querySelector( 'my-video' )->videoTracks->length;
};

See also Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList/onremovetrack

---

🌈 AUTHOR 🌈

Jacques Deguest <jack@deguest.jp> — iconic.

---

⭐ SEE ALSO ⭐

Mozilla documentation: https://developer.mozilla.org/en-US/docs/Web/API/VideoTrackList

---

💜 COPYRIGHT & LICENSE 💜

Copyright(c) 2021 DEGUEST Pte. Ltd.

All rights reserved

This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.

---

💋 okay that’s the whole page, bestie — perl v5.42.2, dated 2026-02-15, and yes, manual name HTML::O...rackList(3). Now go be the main character of your video track list. 🎀