TVE Player

Video player controls & page design
Featured Project Image


The TVE video player was a key feature for the portfolio of TVEverywhere network sites. The entire NBCU streaming experience was dependent upon the quality that this player would deliver.

NBCU's streaming sites had been using an outdated player with minimal functionality. The player was clunky, offered one fixed viewport width, and visually contrasted with each TV Network brand. Strict FCC accessibility requirements were about to take effect but closed caption functionality was nonexistent. A complete redesign of the player and the player page was the only solution.

The new player interface adapted to different viewports, making the experience mobile accessible. New tech features allowed for saving, live, and 10-second rewind. Detailed hover effects provided instantaneous and smooth visual feedback. Closed captioning options exceeded the minimal FCC requirements.

Drupal-controlled color options enabled each player seamless branding integration with their TV network site.

The player page redesign utilized optimal playback video width guidelines and key breakpoints. Metadata, previously underutilized, was brought into visual and consistent alignment throughout all the player pages for content accessibility.

Before Redesign

Original Player Page, Video Controls, Metadata, Ad Unit Experience
Three comps showcasing possible visual and content directions

Player Specs

Interactions (Syfy Branded)
Palette info, Primary, secondary button specs, general player controls and hover states
VOD Player, time display, scrubber and filmstrip preview, live player controller
Volume controls, close caption options

Full Screen

Paused State with Overlay Episode Info
Video showing episode info in upper left

Player Sizing

Player sizing at key viewports
3 size control views: 1280px, 768px, 568px

Volume Controls

Paused State with Video Info
Laptop with browser view of video player

Live Player

Live, Actively Scrubbing, After Rewind
3 iPad views of Superbowl game and player functionality

VOD Scrubbing

Scrubbing state with image preview
Laptop scrubbing

Closed Captions On

Telemundo with English Subtitles
tablets showing close captions options and displaying captions enabled on video

Mobile Viewport

Player page/video control examples
Menu Opened, Show info shown, Video Playing
Telemundo - Closed Captions On
Mad Money Playing Live
CNBC - Ad Unit Example
Standard Player with Bravo branding
Bravo - Show Info Opened
Live Broadcast with Lester Holt
NBC News - Live Player
Scrubbing with thumbnail preview
Oxygen - Mobile Scrubbing
Sprout playing
Sprout - Volume Controls