A simple, lightweight, yet powerful web-based video player built using Video.js. Designed to support modern streaming protocols and playback requirements including HLS, DASH, DRM, and Ad Monetization.
- ✅ HLS (
.m3u8) streaming support - ✅ MPEG-DASH (
.mpd) streaming support - ✅ DRM (Widevine, FairPlay, PlayReady)
- ✅ Ads (Google IMA, VAST, VPAID)
- ✅ Responsive and mobile-friendly UI
- ✅ Customizable & extensible via plugins
| Type | Extension | Description |
|---|---|---|
| MPEG-DASH | .mpd |
Adaptive bitrate streaming (MPEG-DASH) |
| HLS | .m3u8 |
Apple's HTTP Live Streaming |
| Progressive | .mp4 |
Standard MP4 file streaming |
| Encrypted | — | DRM-protected streams (Widevine, FairPlay) |
| Ad Tags | .xml |
VAST / VPAID ad tags |
In Vanilla HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Video Streamer</title>
</head>
<body>
<video
id="my-video"
class="video-js"
controls
width="640"
height="360"
></video>
<script src="./dist/video-streamer-sdk.js"></script>
<script>
VideoStreamer.initializePlayer({
videoId: 'my-video',
videoSrc: 'https://www.w3schools.com/html/mov_bbb.mp4',
});
</script>
</body>
</html>
In React
import React, { useEffect } from 'react';
import 'video.js/dist/video-js.css';
import { initializePlayer } from 'video-streamer-js';
export default function App() {
useEffect(() => {
const player = initializePlayer({
videoId: 'my-video',
videoSrc: 'https://www.w3schools.com/html/mov_bbb.mp4',
});
return () => {
player?.dispose();
};
}, []);
return (
<video
id="my-video"
className="video-js"
controls
width="640"
height="360"
></video>
);
}
git clone https://github.com/your-username/online-video-player.git
cd online-video-player
npm install
npm start