MobileRider Enterprise Video Player

A highly customizable enterprise video player built on Video.js 8, delivering sophisticated video streaming experiences for major clients including Adobe. This player powers video delivery across multiple platforms with advanced features like interactive overlays, adaptive streaming, and real-time user engagement, deployed at scale through Akamai’s global CDN network.

Key Features

• Multi-Client Theming System - Architected a dynamic skin system supporting 24+ custom client themes (Adobe, NASA, FTM, and others), with runtime skin loading and CSS isolation ensuring brand consistency across deployments
• Interactive Overlay Engine - Implemented real-time interactive overlays using Pusher WebSocket integration, enabling audience engagement features like clap reactions, interactive maps, and live widgets that synchronize across viewers
• Adaptive HLS Streaming - Integrated quality selector plugin with automatic bitrate adaptation, providing seamless video delivery across varying network conditions and supporting both live and VOD content
• Cross-Platform Optimization - Developed platform-specific enhancements for iOS, Android, and Windows including inline playback controls, fullscreen handling, and accessibility improvements (ARIA labels, keyboard navigation)
• Chromecast Integration - Built seamless casting capabilities with metadata support and custom receiver application integration for extended screen experiences
• Multi-Environment Deployment Pipeline - Engineered sophisticated build system with environment-specific configurations (production, development, preview) supporting staged rollouts and A/B testing scenarios
• Live Streaming Detection - Implemented intelligent live/VOD detection with dynamic UI adjustments, displaying live indicators and handling infinite duration streams with appropriate controls
• Embedded Player Support - Created iframe embedding system with secure cross-domain messaging, allowing parent pages to control playback and receive real-time player events

Technical Implementation

Architecture & Design Patterns

The player follows a plugin-based architecture extending Video.js with custom components and behaviors. The codebase leverages ES6+ JavaScript transpiled through Babel, with a modular structure organizing functionality into discrete plugins (Overlays, Stream Picker, Big Button, Analytics) that can be selectively enabled per client configuration.

A sophisticated build pipeline using Gulp orchestrates multiple compilation steps: Browserify bundles JavaScript modules, SASS compiles client-specific stylesheets, and environment-specific token replacement ensures proper CDN paths and API endpoints. The build system supports command-line flags for skin selection and produces optimized production bundles with minification and source maps.

Advanced Video Handling

The player implements custom HLS quality selection by integrating videojs-quality-selector-hls with a custom UI layer that displays current quality and allows manual selection. For live streams, the implementation detects Infinity duration and dynamically shows/hides controls, enabling viewers to jump to live edge with a single tap.

Cross-platform compatibility required overriding Video.js native behaviors for Android fullscreen handling (using vjs-fixed-position class instead of native fullscreen API) and iOS inline playback configuration. Windows-specific accessibility issues with ARIA live regions were resolved by conditionally disabling announcements that caused screen reader conflicts.

Real-Time Interactive Features

The overlay system loads external widget libraries dynamically and manages bidirectional communication between the player and overlay widgets. When users trigger interactions (claps, map views), the player updates its active state and notifies analytics providers while maintaining smooth video playback. The implementation carefully manages focus and keyboard navigation to ensure accessibility standards while providing rich interactivity.

A custom mute button overlay appears on autoplay with sound, positioned above the player controls with automatic show/hide behavior tied to user activity states. The implementation uses event delegation and proper cleanup to prevent memory leaks in long-running sessions.

Deployment & Scale

The player deploys to Akamai’s NetStorage via FTP with versioned paths, supporting multiple simultaneous versions for gradual rollouts. A testing script validates deployments by checking HTTP status codes and content integrity. CloudFront invalidation ensures cache freshness for test pages hosted on S3.

Client-specific configurations (Adobe, NASA) use different overlay endpoints, analytics providers, and UI behaviors controlled through build-time variables and runtime options. This flexibility enables serving diverse enterprise clients from a single codebase while maintaining consistent core functionality.

Development Workflow

Built using modern JavaScript tooling with ESLint for code quality, Prettier for formatting, and Stylelint for SASS consistency. The development environment includes BrowserSync for live reloading during local development, enabling rapid iteration on UI components and styling.

The codebase maintains backward compatibility with legacy browsers while leveraging modern APIs where available, using feature detection and graceful degradation. Error handling includes custom error UI, fallback source selection for unsupported formats, and detailed logging for debugging production issues.

Testing workflows include manual QA with dedicated test pages deployed to CloudFront-backed S3 buckets, allowing clients to preview changes before production deployment. The deployment process follows a structured versioning scheme (major.minor.build) with documented rollout procedures.

Business Impact

This player serves as the video delivery backbone for enterprise clients requiring customized branding, advanced analytics, and interactive features. The Adobe deployment specifically supports their event streaming and content delivery needs with specialized overlays for audience engagement and ASL (American Sign Language) video switching capabilities.

The multi-tenant architecture allows rapid onboarding of new clients through skin customization and configuration options, reducing development overhead while maintaining isolated brand experiences. The CDN-based deployment strategy ensures global availability and low latency for international audiences.

Technologies & Integration

The player integrates with multiple third-party services: Adobe Analytics and MUX for comprehensive video analytics and QoS monitoring, Pusher for real-time messaging, Akamai for global content delivery, and AWS S3/CloudFront for test page hosting. The architecture uses Video.js’s plugin system for extensibility while maintaining upgrade compatibility with the core library.

Build tooling includes Gulp 5 for task orchestration, Browserify for module bundling, and SASS for stylesheet compilation. The deployment pipeline supports multiple target environments with configuration injection at build time, enabling infrastructure-as-code practices.