VideoView

A VideoView plays a video in UI Toolkit. It wraps Unity's VideoPlayer: it plays a VideoClip or a URL into a RenderTexture of the size of the video, and shows the picture in the view. A bar under the picture has play and pause, a seek slider with the time and the length, a volume button, loop, the playback speed and full screen. The volume button opens a popup with a volume slider and a mute toggle under it. The speed button shows the current speed ("1x") and opens a menu of the speeds. The bar is made of toolbox controls (ToggleButton, MediaIcon, Slider, Toggle, ContextMenuComponent), so it takes the theme. Use it for a cutscene, a tutorial clip, a trailer in the main menu or a video log in a window.

<tb:VideoView clip="project://database/Assets/Videos/Intro.mp4?fileID=32900000&amp;guid=...&amp;type=3#Intro" volume="0.8" />
<tb:VideoView url="Videos/Intro.mp4" autoplay="true" loop="true" />

In UI Builder, pick the clip in the Clip field of the inspector; it writes the project://database address.

var video = new VideoView { Clip = introClip, Autoplay = true };
video.Finished += startGame;
panel.Add(video);

video.Seek(30);
video.Volume = 0.5f;
video.PlaybackSpeed = 1.5f;

Member	Description
`Clip` (`clip`)	The video asset to play. It wins over `Url`.
`Url` (`url`)	The video file or address when there is no clip: a URL (`https://`, `file://`), a full path, or a path in StreamingAssets such as `Videos/Intro.mp4`. See `ResolveUrl`.
`Autoplay` (`autoplay`)	Plays as soon as the video is ready. Off by default.
`Loop` (`loop`)	Starts again at the end, with no `Finished` event. Off by default.
`Muted` (`muted`)	Silences the sound and keeps the volume.
`Volume` (`volume`)	The sound volume, from 0 to 1. 1 by default.
`PlaybackSpeed` (`playback-speed`)	The speed of play, from 0.1 to 10; 1 is the normal speed. The speed menu of the bar offers 0.5x, 1x, 1.5x and 2x (`VideoView.Speeds`), with a dot at the current speed. Some sources cannot change speed (`VideoPlayer.canSetPlaybackSpeed`); the view keeps the value and sets it again when the video is ready.
`ShowControls` (`show-controls`)	Shows the bar. On by default. Off, the picture takes all the view: make your own bar with the members below.
`ScaleMode` (`scale-mode`)	`Fit` shows the whole picture with bars on two sides; `Fill` covers the view and cuts the parts outside it; `Stretch` takes the size of the view and can change the shape of the picture. `Fit` by default.
`Player`	The `VideoPlayer`. See The player.
`Texture`	The `RenderTexture` the video plays into, or null before the size of the video is known.
`IsPlaying`	True from `Play` to `Pause`, the end or an error. It is true while the video gets ready to play.
`IsPreparing`	True while the player opens the video. The view shows a spinning `ProgressRing` then.
`Time`	The position in seconds. While a seek runs, the time it goes to.
`Duration`	The length in seconds: of the open video, else of the clip, else 0.
`Maximized`	True while the view shows full screen.
`Play()`	Plays from the current time; at the end, from the start. Before the video is ready, it plays when it is.
`Pause()`	Pauses, and raises `Paused`.
`Stop()`	Pauses and goes back to the start.
`TogglePlay()`	Plays or pauses.
`Seek(seconds)`	Goes to a time, clamped to the video. Before the video is ready, it goes there when it is. While the player decodes a seek, a new seek waits for it, and only the last time waits: a drag on the seek slider does not queue a frame for each pointer move.
`Prepared`	The video is open: its size and length are known.
`Started`	The video starts to play.
`Paused`	After `Pause` and `Stop`.
`Finished`	The video played to its end, with `Loop` off.
`TimeChanged`	The position changed, by play or by a seek. The argument is the time in seconds.
`ResolveUrl(url)`	The address the player gets for a `Url`: a URL or a full path stays, any other path goes under `Application.streamingAssetsPath`.
`FormatTime(seconds)`	The time as `m:ss`, or `h:mm:ss` from an hour, as in the bar.

Keys and pointer

Input	Action
A click on the picture	Plays or pauses, and gives the view the focus.
A double click on the picture	Full screen, or back.
Space	Plays or pauses.
Left, Right	Seek 5 seconds back or forward (`VideoView.SEEK_STEP`). A gamepad stick or D-pad does the same.
Up, Down	The volume up or down by 0.1 (`VideoView.VOLUME_STEP`).
M	Mute or sound. The mute toggle in the popup of the volume button does the same.
A drag on the seek slider	Pauses the player during the drag, so the picture follows the thumb. The play goes on at the release.
Escape in the volume popup	Closes the popup.
F	Full screen, or back.
Escape	Leaves full screen.

Space, the arrows and F work while the view itself has the focus. Tab moves into the bar, where each control takes its usual keys.

The player

With no Player, the view makes one on a hidden GameObject (HideFlags.HideAndDontSave) when it attaches to a panel in play mode with a clip or a URL. When the view leaves the panel, it destroys that object and releases and destroys the texture. So the view needs no setup in the scene, stays a plain element of a UXML file, and leaves nothing behind when its window closes. In the editor out of play mode, such as in UI Builder, the view makes no player and shows a black area.

The view sets up its own player for direct audio output with one track, so Volume and Muted go to SetDirectAudioVolume and SetDirectAudioMute.

Set Player to use a VideoPlayer of your own, for example one with an AudioSource output for 3D sound or a mixer. The view then sets its render mode, its target texture, playOnAwake, waitForFirstFrame, skipOnDrop and isLooping, and keeps its audio output. When the view leaves the panel, it stops your player and clears its target texture, but does not destroy it. With an AudioSource output, set the volume on the AudioSource.

Limits:

The view plays the video only while it is on a panel. A window that closes or minimizes takes the view off the panel, so the video stops and starts from the beginning when the view comes back. Autoplay plays it again.
A tab that hides keeps its view on the panel, so the video plays on. Pause it when the tab changes (TabView.activeTabChanged).
The decoding is the work of VideoPlayer: the formats depend on the platform. See the Unity manual for the video formats of each platform. A URL that cannot open shows the error text of the player in the view.
In WebGL, a VideoClip does not play; use a Url.

Full screen

Full screen moves the view into the nearest Workspace, or to the root of the panel when there is none, over all the rest, with the class tb-video-view--maximized. The view keeps the look classes of its old place (tb-style-scope). Back, the view goes to its old place and size. The player keeps playing through the move.

A bar of your own

Set show-controls="false" and drive the view from your own controls. MediaIcon draws the same icons as the bar:

<tb:VideoView name="video" show-controls="false" clip="..." />
<ui:Button name="play"><tb:MediaIcon name="playIcon" kind="Play" /></ui:Button>
<tb:ProgressRing name="ring" animate="false" />

play.clicked += video.TogglePlay;
video.Started += () => playIcon.Kind = MediaIconKind.Pause;
video.Paused += () => playIcon.Kind = MediaIconKind.Play;
video.TimeChanged += time => ring.Value = (float)(time / video.Duration);

MediaIcon

Member	Description
`Kind` (`kind`)	`Play`, `Pause`, `Volume`, `Muted`, `Loop`, `Maximize`, `Restore` or `Eyedropper`.

The icon draws in its color, 16 px by default. In a button it draws again when the pointer goes over the button or the button takes the focus, so it follows the color of the button. A USS background-image replaces the drawing.

Styling

Class	Element
`tb-video-view`	The view: black, at least 240 by 160 px, with an accent border when it has the focus.
`tb-video-view--playing`	The view while it plays.
`tb-video-view--preparing`	The view while the player opens the video.
`tb-video-view--maximized`	The view at full screen.
`tb-video-view__surface`	The `Image` with the picture.
`tb-video-view__busy`	The spinning `ProgressRing`, 48 px in the middle. It shows only with `--preparing`.
`tb-video-view__message`	The error text, white in the middle.
`tb-video-view__bar`	The row of controls, in `--tb-color-surface`.
`tb-video-view__button`	Each button of the bar: play, volume, loop, speed and full screen. A pressed toggle has the accent color.
`tb-video-view__time`	The time and the length texts.
`tb-video-view__seek`	The seek slider.
`tb-video-view__volume-popup`	The popup of the volume button, above the button.
`tb-video-view__volume`	The vertical volume slider in the popup, 110 px high.
`tb-video-view__mute`	The mute `Toggle` under the slider.
`tb-video-view__speed`	The speed button, with the speed as its text. Its menu is a `ContextMenuComponent` (`tb-context-menu`).
`tb-media-icon`	An icon of the bar or of your own bar.

.my-cutscene .tb-video-view__bar { background-color: rgba(0, 0, 0, 0.6); }
.my-cutscene .tb-video-view__button { color: var(--tb-color-accent); }

The tooltips "Play", "Pause", "Mute", "Volume", "Loop", "Playback speed" and "Full screen" are the ToolboxText keys tb.play, tb.pause, tb.mute, tb.volume, tb.loop, tb.playback-speed and tb.full-screen. See Localization.

The VideoDemo example scene has the bar, a bar of your own with round buttons and a ring for the time, a cutscene with subtitles and a hold to skip, and a video in a window.

#VideoView

#Keys and pointer

#The player

#Full screen

#A bar of your own

#MediaIcon

#Styling