repository·development·Indexed 26 days ago
https://github.com/dash-industry-forum/dash.jsA reference JavaScript client implementation for the playback of MPEG DASH content in compliant web browsers. It utilizes Media Source Extensions (MSE) and Encrypted Media Extensions (EME) for playback and content protection. The library includes a MediaPlayer class and optional components such as a reusable ControlBar for UI management and integration plugins like videojs-contrib-dash for Video.js.
The videojs-contrib-dash plugin provides an integration between Video.js and Dash.js.
By using this plugin, you can:
To use dash.js in a web application, include the dash.all.min.js library via CDN, select a <video> element, and use dashjs.MediaPlayer().create() to initialize the player with your MPEG DASH manifest URL. The initialize method takes the video element, the manifest URL, and a boolean for autoplay.
<!doctype html>
<html lang="en">
<head>
<title>dash.js Rocks</title>
<style>
video {
width: 640px;
height: 360px;
}
</style>
</head>
<body>
<div>
<video id="videoPlayer" controls></video>
</div>
<script src="https://cdn.dashjs.org/latest/modern/umd/dash.all.min.js"></script>
<script>
(function () {
var url = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#videoPlayer"), url, true);
})();
</script>
</body>
</html>To integrate the ControlBar, import the ControlBar class as an ES module, initialize your dashjs.MediaPlayer instance, and then pass both the player and the video element to the ControlBar constructor. Finally, call .init() with your wrapper element and .enable() to make it interactive.
import { ControlBar } from 'path/to/contrib/controlbar/ControlBar.js';
const player = dashjs.MediaPlayer().create();
const video = document.getElementById('video-element');
player.initialize(video, url, autoPlay);
const controlbar = new ControlBar(player, video);
controlbar.init(document.getElementById('video-wrapper'));
controlbar.enable();To use the Akamai ControlBar with a Dash.js player, follow these three steps:
controlbar.css and ControlBar.js files in your HTML.video-controller HTML snippet into your DOM. Ensure that buttons requiring specific layouts have the control-icon-layout CSS class applied to avoid layout issues.ControlBar with the player instance, and call .initialize().<!-- 1. Import CSS and JS -->
<link rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css">
<script src="../../contrib/akamai/controlbar/ControlBar.js"></script>
<!-- 2. Add HTML Snippet -->
<div id="videoController" class="video-controller unselectable">
<div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
<span id="iconPlayPause" class="icon-play"></span>
</div>
<span id="videoTime" class="time-display">00:00:00</span>
<div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
<span class="icon-fullscreen-enter"></span>
</div>
<div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
<span class="icon-bitrate"></span>
</div>
<input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01"/>
<div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
<span id="iconMute" class="icon-mute-off"></span>
</div>
<div id="trackSwitchBtn" class="control-icon-layout" title="A/V Tracks">
<span class="icon-tracks"></span>
</div>
<div id="captionBtn" class="btn-caption control-icon-layout" title="Closed Caption">
<span class="icon-caption"></span>
</div>
<span id="videoDuration" class="duration-display">00:00:00</span>
<div class="seekContainer">
<input type="range" id="seekbar" value="0" class="seekbar" min="0" step="0.01"/>
</div>
</div>
<script>
// 3. Create ControlBar.js
player.attachView(video);
var controlbar = new ControlBar(player); // Player is instance of Dash.js MediaPlayer;
controlbar.initialize();
</script>In Dash.js v2.0, you create a player by calling dashjs.MediaPlayer().create() and then initializing it with a video element and a manifest URL.
var url = "https://dash.akamaized.net/envivio/Envivio-dash2/manifest.mpd";
var element = document.querySelector("#selector");
var player = dashjs.MediaPlayer().create();
player.initialize(element, url, true);var url = "https://dash.akamaized.net/envivio/Envivio-dash2/manifest.mpd";
var element = document.querySelector("#selector")
var player = dashjs.MediaPlayer().create();
player.initialize(element, url, true);To use multiple players with separate control bars on the same page, append a unique suffix to every element ID in your HTML snippet. When calling the initialize method, pass that same suffix as a string argument.
<!-- HTML: Append suffix (e.g., '_1') to all IDs -->
<div id="videoController_1" class="video-controller unselectable">
<div id="playPauseBtn_1" class="btn-play-pause" title="Play/Pause">
<span id="iconPlayPause_1" class="icon-play"></span>
</div>
<!-- ... other elements with _1 suffix ... -->
</div>
<script>
// JS: Pass the suffix to initialize
var controlbar = new ControlBar(player);
controlbar.initialize('_1');
</script>Each sample directory in the samples/modules/ path is a standalone package. You can build the sample using the provided npm script. The build output will be generated in out/out.js.
npm run buildtypescript directory.The dash.js ControlBar is a reusable video control bar that generates its own DOM structure. To use it, you must ensure dash.js is loaded and include the Bootstrap Icons CSS for icon rendering.
dashjs object must be available).<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1/font/bootstrap-icons.min.css" rel="stylesheet"><link rel="stylesheet" href="path/to/contrib/controlbar/controlbar.css">position: relative in its CSS to contain the control bar correctly:<div id="video-wrapper" style="position: relative;">
<video id="video-element"></video>
</div><link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1/font/bootstrap-icons.min.css" rel="stylesheet">
<link rel="stylesheet" href="path/to/contrib/controlbar/controlbar.css">
<div id="video-wrapper" style="position: relative;">
<video id="video-element"></video>
</div>When working with dynamic streams, follow this typical lifecycle to ensure the control bar state remains synchronized with the player:
.init()..enable() when the stream is ready..reset() and .disable()..syncMuteState() to ensure the player's mute/volume settings match the UI, then call .enable() again..destroy() when the player or component is being removed.// Create
const cb = new ControlBar(player, video);
cb.init('#video-wrapper');
cb.disable();
// On stream initialized
cb.enable();
// Before loading a new stream
cb.reset();
cb.disable();
// After loading
cb.syncMuteState();
// On stream initialized again
cb.enable();
// Cleanup
cb.destroy();The simple-express-server is a minimal Express server used by dash.js samples. To set it up, ensure you have Node.js (and npm) installed, then install the dependencies.
npm install