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.

Note: The above example screen uses Ooyala default desktop web settings. Your screen might look different.

# Name Description
display area Where the video is displayed.
control bar Enables viewers to manually configure settings and move forward or backward through a video.

Control Bar

The control bar (also known as a scrubber or slider) enables viewers to manually adjust settings and move forward or backward through a video.

Here are visual elements of the control bar in the READY or PAUSED state:

Note: The above example screen uses Ooyala default desktop web settings. Your screen might look different.

# Name Description
play button Click to start video or audio playback.
volume control Click the volume control and drag the slider to adjust the volume.
buffered content Shows how much of the video has been retrieved in the buffer.
share button Click to share this video with others via email, embed URL, or social media.
discover button Click to discover related videos.
closed caption button Click to select closed captions.
bitrate selection button Click to display bitrate options.
full screen button Click to display the video in fullscreen mode.
Here are visual elements of the control bar in the PLAYING state:

Note: The above example screen uses Ooyala default desktop web settings. Your screen might look different.

# Name Description
pause button Click to pause playback.
scrubber (slider) Drag and slide to manually move forward or backward through a video.
Note: Scrubber behavior depends on the playback context:
  • If a live stream is DVR, then the initial scrubber position starts at the end (right-most part) of the control bar (current time), and the user can seek backwards all the way to the earliest point available (left-most part).
  • If a live stream is not DVR, then the scrubber position starts at the left-most part of the control bar and has a duration of zero (the user cannot move the scrubber).
  • For VOD, the initial scrubber position starts at the left-most portion of the control bar, and the user can seek forwards (and subsequently backwards).
play head position Current position during playback (minutes:seconds).
content duration Total length of the video (minutes:seconds).

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.

Note: The above example screen uses Ooyala default desktop web settings. Your screen might look different.

# Name Description
share button Click to share this video with others via email, embed URL, or social media.
discover button Click to discover related videos.
closed caption button Click to display closed caption settings.
bitrate selection button Click to display bitrate options.
full screen button Click to display the video in full-screen mode.

Start Screen

The start screen shows before a video begins playback.

Note: The above example screen uses Ooyala default desktop web settings. Your screen might look different.

# 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.

Note: The above example screen uses Ooyala default desktop web settings. Your screen might look different.

# Name Description
replay button Click to replay from the beginning.
screen to show at end Screen to show at the end. In this example, the screen is blank.

Discovery Screen

The discovery screen shows related or relevant content.

Note: The above example screen uses Ooyala default desktop web settings. Your screen might look different.

# 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.

Note: The above example screen uses Ooyala default desktop web settings. Your screen might look different.

# 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.

Social Sharing Screen

The social sharing screen provides options to share this video with others.

Note: The above example screen uses Ooyala default desktop web settings. Your screen might look different.

# Name Description
share on Twitter Click to share this video on Twitter.
share on Facebook Click to share this video on Facebook.
share on Google+ Click to share this video on Google+.
share via email Click to share this video via email.

Up Next Screen

The up next screen shows the next video to play.

Note: The above example screen uses Ooyala default desktop web settings. Your screen might look different.

# Name Description
up next Display the next upcoming video.
countdown Time remaining before the next video plays.

Live DVR

With live DVR, the LIVE indicator in the control bar means live streaming, and a duration (greater 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 forwards. Dragging it all the way to the right catches you up to the present time. Live DVR is used with HLS streams only.

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.
This functionality is available for Ooyala-encoded assets that have associated thumbnails.

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.
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.

Was this article helpful?