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

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	Drag the slider to adjust the volume. Click the speaker icon to mute or unmute the sound: Additionally, if a video starts up with autoplay but must be muted per browser settings, a mute icon is displayed in the upper left of the player, indicating the video is muted. The text SELECT TO UNMUTE disappears after a few seconds, leaving only the mute icon in the upper left of the video canvas. This icon remains until you unmute the player. Select either this icon or the speaker icon in the control bar to unmute the player.
	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.

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

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

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

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

Keyboard. Viewers can use the keyboard controls (WASD) to change the camera angle.

Mouse. Viewers can select and drag with a mouse to change the camera angle.

Mobile Devices. Viewers change the camera angle by touching and swiping.

Switching Between Monoscopic and Stereoscopic Modes

Use the following icon to switch between monoscopic and stereoscopic modes.

Here is an example in monoscopic mode.

Here is an example in stereoscopic mode.

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. For more information, see Auto-generated Preview Images (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.
	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.

https://help.ooyala.com/sites/all/libraries/dita/en/video-platform/concepts/pbv4_components.html

Was this article helpful?

LEAVE FEEDBACK

Rate this article: