YouTip

## HTML Audio/Video DOM: videoTracks Property The `videoTracks` property is a powerful feature of the HTML5 video DOM API that allows developers to access and manage the available video tracks within a media element. This tutorial provides a comprehensive reference for the `videoTracks` property, including its syntax, return values, and practical code examples. --- ## Definition and Usage The `videoTracks` property returns a **`VideoTrackList`** object. * The **`VideoTrackList`** object represents all the available video tracks for a given video element. * Each individual video track within this list is represented by a **`VideoTrack`** object. This property is particularly useful for multi-track video streams, allowing you to programmatically inspect, select, or switch between different video angles, quality levels, or alternative visual presentations. --- ## Syntax ```javascript videoElement.videoTracks ``` ### Return Value The property returns a `VideoTrackList` object, which contains a collection of `VideoTrack` objects. --- ## API Reference ### 1. The VideoTrackList Object The `VideoTrackList` represents the collection of video tracks. It provides the following properties and methods: | Property / Method | Type | Description | | :--- | :--- | :--- | | `length` | `Number` | Returns the number of available video tracks in the video. | | `selectedIndex` | `Number` | Returns the index of the currently selected/active `VideoTrack` object. Returns `-1` if no track is selected. | | `getTrackById(id)` | `Function` | Returns the `VideoTrack` object matching the specified string `id`. | | `` | `VideoTrack` | Accesses the `VideoTrack` object at the specified index (starting from `0`). | ### 2. The VideoTrack Object Each individual `VideoTrack` object represents a single video track and contains the following properties: | Property | Type | Description | | :--- | :--- | :--- | | `id` | `String` | The unique identifier of the video track. | | `kind` | `String` | The category/type of the video track. Possible values include:
• `"alternative"` (alternative video representation)
• `"captions"` (video with burned-in captions)
• `"main"` (the primary video track)
• `"sign"` (sign-language translation track)
• `"subtitles"` (video with burned-in subtitles)
• `"commentary"` (commentary track)
• `""` (empty string for undefined types) | | `label` | `String` | A user-readable label for the video track (e.g., "Director's Cut", "Main Angle"). | | `language` | `String` | The language code of the video track (e.g., `"en"`, `"zh"`). | | `selected` | `Boolean` | Gets or sets whether the video track is currently active (`true` or `false`). Only one video track can be active at a time. | --- ## Code Examples ### Example 1: Get the Number of Available Video Tracks The following example retrieves the video element and alerts the total number of available video tracks. ```javascript // Get the video element by ID var myVid = document.getElementById("video1"); // Alert the number of available video tracks alert("Available video tracks: " + myVid.videoTracks.length); ``` ### Example 2: Inspecting and Selecting a Video Track This example demonstrates how to loop through all available video tracks, inspect their properties, and programmatically enable a specific track. ```javascript var video = document.getElementById("myVideo"); var tracks = video.videoTracks; // Loop through all available video tracks for (var i = 0; i < tracks.length; i++) { console.log("Track ID: " + tracks.id); console.log("Track Label: " + tracks.label); console.log("Track Language: " + tracks.language); console.log("Track Kind: " + tracks.kind); // Enable the track if it is an alternative angle if (tracks.kind === "alternative") { tracks.selected = true; console.log("Switched to alternative video track: " + tracks.label); } } ``` --- ## Browser Compatibility > **Warning:** The `videoTracks` property is **not supported** by default in most mainstream modern browsers (such as Google Chrome, Mozilla Firefox, and Microsoft Edge) without experimental flags enabled. > > For production environments, it is highly recommended to use specialized JavaScript media player libraries (such as **Hls.js**, **Dash.js**, or **Video.js**) to manage multi-track video streams, as they provide cross-browser polyfills and custom implementations for track selection.