Freewheel HTML5 Video Player

HLS Streaming

Adaptive bitrate streaming with automatic quality selection for optimal viewing

Ad Management

Seamless Freewheel integration with intelligent ad scheduling and monetization

Modern Stack

Built with Preact, Zustand, and TypeScript for reliability and performance

Custom Controls

Intuitive playback and volume management with responsive UI design

Player

Demo Controls

Manage query string parameters to control player behavior:

Logging

Enable console debug logging for all player events

Query: none

Current URL

Full URL with query parameters

Click to copy

Project Overview

A web-based video player combining HLS streaming with Freewheel client-side ad insertion. Designed for broadcasters, content providers, and media platforms requiring reliable video delivery and monetization.

Key Capabilities

→ Adaptive bitrate streaming with automatic quality adjustment
→ Client-side ad insertion with Freewheel framework
→ Real-time state management with Zustand
→ Comprehensive event system for tracking and analytics

Technology Stack

Frontend Framework Preact 10

State Management Zustand

Build Tool Vite 6

Language TypeScript

Package Manager pnpm

Streaming Protocol HLS.js

Getting Started

Development

                            pnpm install

                            pnpm dev

Start local development server with hot reload

Production Build

                            pnpm build

                            pnpm preview

Build optimized production bundle

Configuration

                            export const CONFIG = {
                              ASSET_ID: "id",

                              MANIFEST_URL: "m3u8_url"

                            }

Update config in src/config.ts

Troubleshooting

Blank Player Screen

Verify HLS manifest URL in src/config.ts is correct and accessible. Check browser console for network errors.

No Ads Displaying

Confirm Freewheel account credentials and ad request configuration. Enable logging with ?log query parameter for debugging.

Enable Console Logging

Append ?log to URL to enable debug logging for all player events and state changes.

CORS Issues

Ensure manifest URL and ad server support cross-origin requests. Configure appropriate CORS headers on your streaming infrastructure.

Browser Compatibility

Modern browsers support HLS via HLS.js. Safari includes native HLS support. Test across target browsers for optimal experience.