dash.js
A reference client implementation for the playback of MPEG DASH via Javascript and compliant browsers.
Top Related Projects
HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.
JavaScript player library / DASH & HLS client / MSE-EME player
:clapper: An extensible media player for the web.
Video.js - open source HTML5 video player
JW Player is the world's most popular embeddable media player.
Quick Overview
dash.js is an open-source MPEG-DASH player written in JavaScript. It provides a robust, cross-platform solution for adaptive streaming of multimedia content over HTTP, allowing for seamless playback of high-quality video across various devices and network conditions.
Pros
- Highly customizable and feature-rich player for MPEG-DASH content
- Supports multiple DRM systems for content protection
- Active development and community support
- Extensive documentation and examples
Cons
- Learning curve can be steep for developers new to adaptive streaming
- Performance may vary depending on the browser and device
- Some advanced features require additional setup and configuration
- Limited support for older browsers and devices
Code Examples
- Basic player setup:
const video = document.querySelector("video");
const player = dashjs.MediaPlayer().create();
player.initialize(video, "https://example.com/manifest.mpd", true);
- Enabling low latency streaming:
const player = dashjs.MediaPlayer().create();
player.updateSettings({
streaming: {
lowLatencyEnabled: true,
liveDelay: 3
}
});
player.initialize(video, "https://example.com/live-manifest.mpd", true);
- Adding custom filters:
player.registerMediaSourceExtension("video/mp4", CustomMSE);
player.registerMediaSourceExtension("audio/mp4", CustomMSE);
- Listening to events:
player.on(dashjs.MediaPlayer.events.QUALITY_CHANGE_REQUESTED, (e) => {
console.log("Quality changed to " + e.newQuality);
});
Getting Started
To get started with dash.js, follow these steps:
- Include the dash.js library in your HTML:
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
- Create a video element in your HTML:
<video id="videoPlayer" controls></video>
- Initialize the player in your JavaScript:
const video = document.getElementById('videoPlayer');
const url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";
const player = dashjs.MediaPlayer().create();
player.initialize(video, url, true);
This will create a basic DASH player that automatically plays the Big Buck Bunny demo stream. For more advanced usage and configuration options, refer to the official documentation.
Competitor Comparisons
HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.
Pros of hls.js
- Better support for HLS streaming, which is widely used by major streaming platforms
- More lightweight and focused specifically on HLS playback
- Extensive browser compatibility, including older versions
Cons of hls.js
- Limited to HLS streaming, while dash.js supports multiple formats
- Less comprehensive feature set compared to dash.js
- Smaller community and potentially slower development cycle
Code Comparison
hls.js:
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('https://example.com/playlist.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() { video.play(); });
dash.js:
var video = document.getElementById('video');
var player = dashjs.MediaPlayer().create();
player.initialize(video, 'https://example.com/manifest.mpd', true);
player.on(dashjs.MediaPlayer.events.PLAYBACK_STARTED, function() {
console.log('Playback started');
});
Both libraries provide straightforward APIs for initializing and controlling video playback. hls.js focuses on HLS-specific functionality, while dash.js offers a more generic approach suitable for various streaming formats. The code snippets demonstrate the basic setup process for each library, highlighting their similarities in usage despite their different focuses.
JavaScript player library / DASH & HLS client / MSE-EME player
Pros of shaka-player
- More extensive codec support, including VP9 and AV1
- Better support for live streaming and low-latency streaming
- More flexible configuration options and API
Cons of shaka-player
- Larger file size and potentially higher memory usage
- Steeper learning curve due to more complex API
- Less focus on DASH-specific features
Code Comparison
shaka-player:
const player = new shaka.Player(videoElement);
player.configure({
streaming: {
bufferingGoal: 60,
rebufferingGoal: 15
}
});
player.load('https://example.com/video.mpd');
dash.js:
const player = dashjs.MediaPlayer().create();
player.initialize(videoElement, 'https://example.com/video.mpd', true);
player.setBufferToKeep(20);
player.setStableBufferTime(30);
Both libraries provide methods for initializing the player and loading content, but shaka-player offers more granular configuration options. dash.js has a simpler API for basic usage, while shaka-player provides more flexibility for advanced use cases.
:clapper: An extensible media player for the web.
Pros of Clappr
- More flexible and modular architecture, allowing easier customization and plugin development
- Supports a wider range of media formats, including HLS and MPEG-DASH
- Simpler API and easier integration for basic use cases
Cons of Clappr
- Less specialized for DASH streaming compared to dash.js
- Smaller community and potentially slower development of new features
- May have less robust support for advanced DASH features
Code Comparison
dash.js basic implementation:
var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#videoPlayer"), "video.mpd", true);
Clappr basic implementation:
var player = new Clappr.Player({
source: "video.mp4",
parentId: "#player"
});
Both libraries offer straightforward initialization, but Clappr's API is slightly more concise and intuitive for basic usage. However, dash.js provides more specific options for DASH streaming out of the box.
While dash.js focuses exclusively on DASH streaming, Clappr offers a more versatile solution for various media formats. The choice between the two depends on specific project requirements, with dash.js being the better option for DASH-centric applications and Clappr offering more flexibility for mixed media projects.
Video.js - open source HTML5 video player
Pros of video.js
- Broader support for various video formats beyond DASH
- More extensive plugin ecosystem and community contributions
- Easier customization of player appearance and controls
Cons of video.js
- Less specialized for DASH streaming, may require additional plugins
- Larger file size due to broader feature set
- Potentially higher learning curve for advanced DASH-specific features
Code Comparison
video.js:
var player = videojs('my-video', {
controls: true,
sources: [{ src: 'video.mp4', type: 'video/mp4' }]
});
dash.js:
var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#videoPlayer"), "video.mpd", true);
Summary
video.js is a versatile player with broad format support and extensive customization options, while dash.js specializes in DASH streaming. video.js may require additional setup for DASH but offers more flexibility for various video formats. dash.js provides a more streamlined approach for DASH content but with less built-in support for other formats. The choice between them depends on specific project requirements and the importance of DASH streaming versus general video playback needs.
JW Player is the world's most popular embeddable media player.
Pros of jwplayer
- More comprehensive media player solution with support for various formats beyond DASH
- Extensive customization options and API for advanced functionality
- Commercial support and regular updates
Cons of jwplayer
- Proprietary software with licensing costs for commercial use
- Less focused on DASH-specific features and optimizations
- Potentially heavier footprint due to broader feature set
Code Comparison
dash.js:
var player = dashjs.MediaPlayer().create();
player.initialize(videoElement, "video.mpd", true);
jwplayer:
jwplayer("myElement").setup({
file: "video.mpd",
type: "dash"
});
Key Differences
- dash.js is specifically designed for DASH streaming, while jwplayer supports multiple formats
- dash.js is open-source and free, jwplayer has both free and paid versions
- dash.js focuses on DASH standards compliance, jwplayer offers a wider range of features
Use Cases
- dash.js: Ideal for projects requiring a lightweight, DASH-specific player
- jwplayer: Better suited for applications needing a versatile media player with extensive customization
Community and Support
- dash.js: Active open-source community, primarily developer-driven support
- jwplayer: Commercial support available, larger ecosystem of plugins and integrations
Performance Considerations
- dash.js may have an edge in DASH-specific optimizations
- jwplayer's broader feature set might impact performance in some scenarios
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME

Overview
dash.js is a JavaScript based implementation for the playback of MPEG DASH content in browser based environments that support the Media Source Extensions and the Encrypted Media Extensions.
Documentation
To get started, check out our documentation that includes a quickstart guide , usage instructions and contribution guidelines.
Hosted Examples
Quickstart
A very basic example on how to use dash.js in your application can be found below:
<!doctype html>
<html>
<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>
Contact
Please raise any issue directly on Github.
You can also find us on Slack! and on Google Groups.
License
dash.js is released under BSD license
Tested With
Top Related Projects
HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.
JavaScript player library / DASH & HLS client / MSE-EME player
:clapper: An extensible media player for the web.
Video.js - open source HTML5 video player
JW Player is the world's most popular embeddable media player.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot