User Interface for the Player V4 Skin
This topic describes the visual components of the new Ooyala player.
Key Components
Here are the key components of the player.

# | Name | Description |
---|---|---|
![]() |
display area | Where the video is displayed. |
![]() |
control bar | Enables viewers to configure settings manually and move forward or backward through a video. |
Control Bar
The control bar (also known as a scrubber or slider) enables viewers to adjust settings manually and move forward or backward through a video.
Here are visual elements of the control bar in the READY or PAUSED state:

# | Name | Description |
---|---|---|
![]() |
play button | Click to start video or audio playback. |
![]() |
volume control |
|
![]() |
buffered content | Shows how much of the video has been retrieved in the buffer. |
![]() |
playback speed button | Click to select playback speed. |
![]() |
language button | Click to select subtitles and audio options. The Multi-Audio menu is automatically applied when an asset has multiple audio tracks. |
![]() |
share button | Click to share this video with others via email, embed URL, or social media. |
![]() |
bitrate selection button | Click to display bitrate options. |
![]() |
full screen button | Click to display the video in fullscreen mode. |

# | Name | Description |
---|---|---|
![]() |
pause button | Click to pause playback. |
![]() |
play head position | Current position during playback (minutes:seconds). |
![]() |
content duration | Total length of the video (minutes:seconds). |
![]() |
scrubber (slider) | Drag and slide to manually move forward or backward through a video. Note:
Scrubber behavior depends on the playback context:
|
Buttons
The player displays buttons that can provide options to share the video on social networks, discover related videos, set closed captions and bitrates, and view the video in full-screen mode.
# | Name | Description |
---|---|---|
![]() |
playback speed | Click to select playback speed, from Normal to slower, or faster. |
![]() |
language button | Click to select audio, or to activate subtitles. |
![]() |
discover | Click to discover related videos. |
![]() |
share button | Click to share this video with others via email, embed URL, or social media. |
![]() |
video quality | Click to display video quality options. |
![]() |
full screen button | Click to display the video in full-screen mode. |
Multi-Audio
The video can display multiple audio tracks, which you can switch between during playback. Typically, this is used for videos with audio tracks in different languages and/or audio tracks with additional information such as audio descriptions (for viewers with visual impairments), and audio commentary, such as from the director. See here for information on how to configure these tracks.

Variable Speed Playback
You can control the playback speed of the video, relative to the original speed. See here for more information on this control.
Previous/Next Buttons and Skip Forward/Back Buttons
The display includes previous and next video buttons, as well as skip forward and back buttons. The skip buttons can be customised to specify the amount of seconds to skip forward or back in the current video. These buttons cause the video canvas to be blurred when rendered to enable them to be clearly visible regardless of video frame content:
These new buttons are disabled by default currently, and all configuration is handled in the skin.json. See Variable Speed and Skip Controls for more information on how to enable and configure these controls.
Integrated AirPlay Support with Safari browser
Ooyala's HTML5 player now supports Apple AirPlay V2 on the Safari browser. The AirPlay feature moves video from a Safari browser to another Apple device. If AirPlay is enabled on the end-user’s device, and another local device is available to receive the AirPlay transmission, the cast icon will appear automatically in the control bar. if the user selects the AirPlay icon and chooses an available device, video playback will move to the selected device. Selecting the icon again from the player’s control bar will move the video back to the web player.
Start Screen
The start screen shows before a video begins playback.
# | Name | Description |
---|---|---|
![]() |
title | Asset title. |
![]() |
play button | Click to start playing video. |
Pause Screen
The pause screen that displays when the video is paused during playback.
# | Name | Description |
---|---|---|
![]() |
play | Click to resume playing from the current playhead position. |
End Screen
The end screen shows after a video completes playback.
# | Name | Description |
---|---|---|
![]() |
screen to show at end | Screen to show at the end. |
![]() |
replay button | Click to replay from the beginning. |
Discovery Screen
The discovery screen shows related or relevant content.
# | Name | Description |
---|---|---|
![]() |
related videos | Scroll and click a related video. |
![]() |
close | Click to close the discovery list. |
Ad Screen
The ad screen shows ads in the player.
# | Name | Description |
---|---|---|
![]() |
ad title | Title of the current ad. |
![]() |
duration | Length of the ad, in seconds. |
![]() |
learn more | Click to learn more about this ad. |
![]() |
skip ad | Click to skip the current ad. |
Up Next Screen
The up next screen shows the next video to play.
# | Name | Description |
---|---|---|
![]() |
Countdown | Displays the next upcoming video and the countdown before the next video plays. |
![]() |
Information | Display the title and description of the next upcoming video. |
![]() |
Cancel | Cancel and close the overlay. |
Live DVR
With live DVR, the LIVE indicator in the control bar means live streaming, and a duration (less than zero) indicates that DVR is available. With live DVR, you can drag the slider to the left to go backwards in time, and drag it to the right to go forward, closer to the Live point. Drag it all the way to the right - or click the "Live" button - to catch up to the present time.
Playing VR 360 Videos
The Ooyala Player automatically detects VR 360 streams and displays the applicable playback controls to navigate VR 360 videos. The following example shows the VR 360 icon on screen.
Changing the Camera Angle
Viewers have several ways in which to change the camera angle.




Switching Between Monoscopic and Stereoscopic Modes
Use the following icon to switch between monoscopic and stereoscopic modes.


Thumbnail-based Seeking
Player V4 displays thumbnails to help you search through a video.- For desktop and mobile devices, if you drag the scrubber bar, the player pops up a
carousel of thumbnails. The player displays as many as will fit on the screen.
- For desktop devices (browsers in mobile devices do not support this behavior), if you
hover your mouse over the scrubber bar, you will see the nearest thumbnail image
associated with that location in the video.
Buttons in the Player
Image | Name | Description |
---|---|---|
![]() |
play button | Play the video. |
![]() |
pause button | Pause playback. |
![]() |
replay | Replay the current video. |
![]() |
volume control (mobile) | Control the volume level. |
![]() |
volume control (web) | Control the volume level. |
![]() |
mute | Mute the audio. |
![]() |
full screen | Change display to full-screen mode. |
![]() |
standard screen | Changer display to standard screen mode. |
![]() |
language | Select subtitles and audio options |
![]() |
share | Share this video with others. |
![]() |
bitrate selection | Select a bitrate. |
![]() |
discovery | Discover related videos |
![]() |
left arrow | Scroll left through the available videos. |
![]() |
right arrow | Scroll right through the available videos. |
![]() |
closed captions | Display closed captions for the video. |
![]() |
close | Close the player. |