MediaFox

Appearance

Getting Started ​

Welcome to MediaFox! Let's get you up and running with a powerful Media Player in just a few minutes.

Quick Start ​

Try It Now! ​

Before diving into the code, try the interactive demo to see MediaFox in action:

  • Live Player Demo - Interactive Media Player on the home page with all essential features
  • Player API Reference - Complete API documentation with examples

Installation ​

Install MediaFox and its peer dependency mediabunny:

bash
bun add @mediafox/core mediabunny
bash
npm install @mediafox/core mediabunny
bash
yarn add @mediafox/core mediabunny
bash
pnpm add @mediafox/core mediabunny

For React, use the dedicated package:

bash
bun add @mediafox/react @mediafox/core mediabunny
bash
npm install @mediafox/react @mediafox/core mediabunny
bash
yarn add @mediafox/react @mediafox/core mediabunny
bash
pnpm add @mediafox/react @mediafox/core mediabunny

Browser Support ​

MediaFox works in all modern browsers:

BrowserMinimum Version
Chrome94+
Edge94+
Safari16.4+
Firefox130+ (requires flag)

Firefox Setup

Firefox users need to enable WebCodecs by setting dom.media.webcodecs.enabled to true in about:config.

Basic Usage ​

Quick Setup (Copy & Run) ​

Here's the fastest way to get started:

html
<!DOCTYPE html>
<html>
<head>
  <title>My First MediaFox Player</title>
</head>
<body>
  <canvas id="player" width="1280" height="720"></canvas>

  <script type="module">
    import { MediaFox } from '@mediafox/core';

    // Create player
    const canvas = document.querySelector('#player');
    const player = new MediaFox({
      renderTarget: canvas,
      volume: 0.8
    });

    // Load and play video
    await player.load('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');
    await player.play();

    console.log('Video is playing!');
  </script>
</body>
</html>

Step-by-Step Guide ​

1. Create Canvas Element ​

MediaFox renders video to a canvas element for maximum control:

html
<canvas id="video-canvas" width="1280" height="720"></canvas>

2. Initialize Player ​

typescript
import { MediaFox } from '@mediafox/core';

const canvas = document.querySelector('#video-canvas');
const player = new MediaFox({
  renderTarget: canvas,
  volume: 0.8,
  autoplay: false
});

3. Load Media ​

MediaFox accepts various media sources:

typescript
// From file input
const file = fileInput.files[0];
await player.load(file);

// From URL
await player.load('https://example.com/video.mp4');

// From Blob
const response = await fetch(url);
const blob = await response.blob();
await player.load(blob);

// From ArrayBuffer
const buffer = await file.arrayBuffer();
await player.load(buffer);

4. Control Playback ​

typescript
// Play/Pause
await player.play();
player.pause();

// Seek to specific time
player.currentTime = 30; // Jump to 30 seconds
await player.seek(30); // Alternative method

// Volume control
player.volume = 0.5; // 50% volume
player.muted = true; // Mute

// Stop and reset
player.stop();

5. Subscribe to State Changes ​

typescript
const subscription = player.subscribe(state => {
  console.log(`Time: ${state.currentTime}/${state.duration}`);
  console.log(`Playing: ${state.playing}`);
  console.log(`Paused: ${state.paused}`);
});

// Unsubscribe when done
subscription.unsubscribe();

Interactive Learning

Want to see these features in action? Check out the live demo on the home page for a complete working player you can interact with!

Interactive Demo ​

Try the live player demo on the home page:

  • Complete working player you can interact with
  • File upload and URL loading
  • Real-time progress tracking
  • Volume and playback controls
  • Keyboard shortcuts
  • Mobile responsive design
  • Multi-track support
  • Screenshot functionality

Quick Start Code ​

For a minimal working example, copy this HTML:

html
<!DOCTYPE html>
<html>
<head>
  <title>Quick MediaFox Player</title>
</head>
<body>
  <canvas id="player" width="1280" height="720"></canvas>

  <script type="module">
    import { MediaFox } from '@mediafox/core';

    const canvas = document.querySelector('#player');
    const player = new MediaFox({ renderTarget: canvas });

    // Load sample video
    await player.load('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');
    await player.play();
  </script>
</body>
</html>

Want More Features?

The live demo on the home page includes all the essential controls and features you'll need for most applications, plus advanced features like multi-track support and screenshot capture!

Browser Requirements ​

MediaFox requires modern browser features:

  • WebCodecs API - For hardware-accelerated video decoding
  • Web Audio API - For audio playback
  • Canvas API - For video rendering
  • ES2022 - Modern JavaScript features

Browser Support ​

BrowserMinimum Version
Chrome94+
Edge94+
Safari16.4+
Firefox130+ (requires flag)

TIP

Firefox users need to enable WebCodecs by setting dom.media.webcodecs.enabled to true in about:config.

Check caniuse.com/webcodecs for the latest browser support information.

TypeScript Support ​

MediaFox is written in TypeScript with full type safety:

typescript
import { MediaFox, PlayerOptions, PlayerStateData } from '@mediafox/core';

const options: PlayerOptions = {
  renderTarget: canvas,
  volume: 0.8,
  autoplay: true
};

const player = new MediaFox(options);

player.subscribe((state: PlayerStateData) => {
  // Full IntelliSense and type checking
  console.log(state.currentTime); // number
  console.log(state.playing); // boolean
  console.log(state.volume); // number
});

Next Steps ​

Try the Interactive Demo ​

  • Live Player Demo - Perfect starting point with all essential features (on home page)
  • Player API Reference - Complete API documentation with examples

Learn More ​

Common Issues & Solutions ​

CORS Errors ​

When loading videos from a different domain:

typescript
const player = new MediaFox({
  crossOrigin: 'anonymous' // or 'use-credentials'
});

Make sure the server sends proper CORS headers.

Autoplay Restrictions ​

Modern browsers restrict autoplay. Solutions:

  1. Start on user interaction (recommended):
typescript
document.addEventListener('click', async () => {
  await player.play();
}, { once: true });
  1. Mute for autoplay:
typescript
const player = new MediaFox({
  autoplay: true,
  muted: true // Required for autoplay
});

Memory Management ​

Always clean up when done:

typescript
// Component unmount / page unload
player.dispose(); // Releases resources but keeps instance

// Or completely destroy
player.destroy(); // Cannot be used after this

Performance Tips ​

  1. Use appropriate canvas size - Match your video resolution
  2. Enable hardware acceleration - WebCodecs uses GPU by default
  3. Manage buffering - Set appropriate maxCacheSize
  4. Dispose unused players - Prevent memory leaks

Ready to Build? ​

You've got everything you need to start building with MediaFox:

Start Here: ​

  1. Try the Live Demo - Get hands-on experience with the interactive player on the home page
  2. Explore the API - Complete API reference with examples

Need Help? ​

Framework Integration: ​

Happy coding!

MIT License