MSE Nav Player

A lightweight, framework-agnostic JavaScript library for building custom DASH + MSE video players from scratch — perfect for learning, extending, or integrating with legacy and modern web platforms.

Versioning

This project uses npm versioning (npm version patch) for managing releases. Each patch release increments the last number in the version (e.g., 1.0.x).

For detailed changes in each version, see the CHANGELOG.md.

Features

• DASH SegmentTemplate support ($Number$, $Time$)
• Generates segment URLs from MPD
• Works with Media Source Extensions (MSE)
• Supports legacy browsers (via ES5 build)
• Tree-shakable ESModule build for modern frameworks
• Written in TypeScript, published with full types
• Hookable lifecycle methods (onPlay, onError, etc.)
• Volume, mute, seek, and other player controls
• Resolution switching
• Rendition awareness
• Adaptive Bitrate toggle (stub for future)

Installation

# Install via NPM
npm install mse-nav-player

Or use the UMD version directly in your browser:

<script src="https://cdn.jsdelivr.net/npm/mse-nav-player/dist/mse-nav-player.es5.js"></script>

Usage

import { Player } from "mse-nav-player"

const player = new Player()
player.attachVideoElement(document.getElementById("video")!)

player.onReady = () => console.log("Player is ready")
player.onError = (err) => console.error("Playback error", err)

await player.load("https://your.cdn/path/to/manifest.mpd")
player.play()

Browser Example (Legacy Compatible)

<video id="video" controls></video>
<script src="https://cdn.jsdelivr.net/npm/mse-nav-player/dist/mse-nav-player.es5.js"></script>
<script>
  const player = new MseNavPlayer.Player()
  player.attachVideoElement(document.getElementById("video"))
  player.load(
    "https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd"
  )
</script>

API Reference: Player Class

Initialization

const player = new Player()
player.attachVideoElement(videoElement)
player.load("https://example.com/manifest.mpd")

Methods

| Method | Description | | --------------------------------------------- | ---------------------------------- | | attachVideoElement(video: HTMLVideoElement) | Binds the video element | | load(manifestUrl: string) | Loads and parses the DASH manifest | | play() / pause() | Control playback | | seekTo(time: number) | Jump to a specific timestamp | | setVolume(number) / mute() / unmute() | Volume control | | reset() / destroy() | Clear/reset/detach logic | | getBitrate() | Returns current bitrate | | getResolution() | Returns active video resolution | | getAvailableRenditions() | Lists all video renditions | | setRendition(res: string) | Switch to a specific resolution | | setAdaptiveBitrate(enable: boolean) | Toggle ABR (stub for now) |

Event Hooks

player.onPlay = () => console.log("Playing")
player.onPause = () => console.log("Paused")
player.onEnded = () => console.log("Ended")
player.onReady = () => console.log("Ready")
player.onError = (err) => console.error(err)
player.onBuffering = () => console.log("Buffering")
player.onTimeUpdate = (t) => console.log("Time:", t)

Development

# Install dependencies
npm install

# Build for both modern (ES6) and legacy (ES5)
npm run build

# Watch for changes and rebuild
npm run watch

License

MIT © Navaneeth M