Video Track Selection

The Video Track Selection plugin allows you to configure the player with a single stream that contains multiple video tracks. When you use this plugin, the player's user interface displays a Video menu with different Video Track options to select. This gives you the ability to list and control numerous video tracks while improving the viewing experience for your audience.

An example use case may include a sporting event, where you can manipulate a video track of the same event shot from different angles. Another scenario may consist of working with video tracks of the same stream to deliver accessible content to viewers with disabilities.

Before you start

The Video Track Selection plugin works with streaming sources such as MPEG-DASH, HLS, and Real-time streaming at scale (RTS). Therefore, you should integrate those plugins alongside the Video Track Selection plugin.

An HLS or MPEG-DASH media source with multiple separate audio tracks in the manifest or a multi-track Wowza RTS@scale source is required for the Video Track Selection plugin to work.

Install the plugin

To install the Video Track Selection plugin, load it next to the core player:

Copy
Copied
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/vtsel.min.js"></script>
info

If you're using RTS streams with this plugin, the RTS streams will be automatically detected and rendered.

Configure the plugin

There are no mandatory configuration options for the Video Track Selection plugin. You can just load the plugin to activate it. After loading the plugin, a flowplayer-video-menu container is added to the player's user interface where you can control video track angles during playback.

Wowza Flowplayer Video Track Selection plugin

Properties

When you work with this plugin and our API, you can leverage the tracks property to return an array of all available tracks. The array is populated only if the source that's being played provides multiple video tracks. If there's only one video track, the length property indicates one element exists inside the array. The tracks property is undefined when you're not utilizing the plugin.

Each item in the returned tracks array can have the properties outlined in the following table.

Property Type Description
default boolean Returns true if a video track is enabled by default once the src is set for the player.
name string Determines the name or label of the video track.
selected boolean Returns true if a video track is enabled at a specific time. Otherwise, returns false.
When switching to another video track, set this property to true for the corresponding track. For example, player.tracks[0].selected = true.

Events

The following table describes the events you can capture to control and manage the video track behavior of the player while using the plugin.

Event Description
flowplayer.events.VIDEO_TRACKS Emitted when the player detects a src with multiple video tracks. For information about tracks and their properties, see the Properties section.
flowplayer.events.VIDEO_TRACK_SELECT Emitted when a different video track is enabled.

When enabling a different video track using the flowplayer.events.VIDEO_TRACK_SELECT event, the selected track is attached to the detail property of the event object.

Copy
Copied
player.on(flowplayer.events.VIDEO_TRACK_SELECT, (ev)=> {
    const enabled_track = ev.detail.track
})