Ooyala Video Player & Monetization

Ooyala Video Platform
Ooyala HTML5 Skin



Ooyala V4 Player

Ooyala Player V4 is a next generation video player that provides an engaging, personalized, responsive, content-aware, and robust video playback experience that is consistent across devices and platforms. Player V4 implements a new skin that is FULLY customizable through JSON or SCSS.

The HTML 5 player is built using the Facebook React library




Ask from our Customers

No two companies are exactly alike in terms of styling, branding and experience they want to provide to their end users. For the video players design to be as flexible as possible, it is crucial to design a fully customizable out of the box experience. This would allow the player to stand on its own and would provide the necessary customizations for companies with unique branding.

My Role

My role was to design the end-to-end experience for the video player, covering the entire design lifecycle of the product. On top of executing the design of the video player, I also assisted engineering with refining the pixels on the player by contributing to the production code via GitHub.



Challenges

All the functionality of the player has to be contained inside the player window. For a moment, think of YouTube. How do you navigate through content, explore new videos, use simple settings? Those live on the YouTube site outside of the player. What we want to build is an experience that encompasses all of Ooyala’s features in one place so our customers can focus on their content and business and not extra development time and maintenance.


"For the video players design to be as flexible as possible, it is crucial to design a fully customizable out of the box experience."







Core Viewing Experience

The core viewing experience is made up a few key components. There is basic playback that allows the user to simply start and stop video. This is a contextual pause screen that is programmable by the customer. This allows the user to control what content they show on pause. Things like “playlist” and other contextual information live in different programable screens within the player.




Organized Playlist

Part of what customers look for is the ability to arrange content in a particular order. This allows the customer to give a focused viewing experience to the end user and helps with converting users to paying for premium content.

This view player uses an inline carousel. We also designed the option to switch to a full page overtake of the video player.




Carousel Scrubbing

This scrubbing feature allows the user to see several thumbnail previews at once. As the user scrubs through the timeline, the thumbnails update. This feature is fully programmable to customize for the customer's needs.



Seeking

Seeking allows the user to hover over the timeline and see what comes in the future without disrupting the video playing experience. Seeking displays only a single thumbnail and updates as you move your cursor along the timeline.



Discovery

“Discovery” is an add on feature to the player that allows the customer to utilize an intelligent recommendation engine for their user.



How Discovery Works

Ooyala’s patented video recommendation engine suggests videos based on user tastes, content relatedness, viewing behavior and trending content. Ooyala Discovery APIs help the customer personalize their experience and increase engagement.



Custom Icon Library

Ooyala slick type has 48 different icons with various sets to fit the context of your business needs. Slick type is a font we’ve created that works seamlessly between web and native platforms.









Customize Your Player

One of the most popular features of the player is that it is fully customizable from end to end. The Ooyala team has made sure to take into account every consideration necessary for making it as easy as possible to customize the player quickly. By editing a master JSON file, one person can begin customizing the player to fit their needs.







JSON Customization

In order to get our customers up and running as fast as possible, we wanted to provide a master JSON file. This file would allow our customers with limited dev resources/knowledge to quickly make simple modifications to color, icons, and minor layout changes, as well as turning simple features on and off.

  • "playIconStyle": { "color": "#ffc41d", =

Example: JSON

"startScreen": {
"promoImageSize": "default",
"showPlayButton": true,
"playButtonPosition": "center",
"playIconStyle": {
"color": "white",
"opacity": 1,
}


Skin config: developer experience

The developer experience makes it easier for devs or users with some front end knowledge to navigate components in the source code. By using SCSS, the users can make global style changes to the entire player components, which saves time and money in development costs.

  • background: $control-bar-bg;


  • //gradients SCSS

    $control-bar-bg: linear-gradient(to bottom, rgba(0,0,0,0) 23%,rgba(0,0,0,0.6) 90%,rgba(0,0,0,0.69) 100%);

Example: SCSS

.oo-control-bar {
background: $control-bar-bg;
@include vendor-prefixes (background, $control-bar-gradient);
transition: opacity .2s ease-in-out, height .3s ease-in-out;
width: 100%;
height: $control-bar-height;
position: relative;
margin: 0;
padding: 0 15px;
font-size: 18px;
list-style: none;

.oo-control-bar-items-wrapper {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
flex-flow: row nowrap;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
white-space: nowrap;
& > * {
line-height: 1 !important;
}}


Customizable Micro Interactions

The player has simple micro interactions built in to give the end user the quality experience they expect. The micro interactions are fully customizable from size and color to speed and type of transition animation.