MENU
Dash.js
Creating assets that work with the fundamental EME/MSE APIs in modern browsers is a laborious process, taking significant time, computing power, and energy. Dash.js is a framework that facilitates the creation of many different EME/MSE players. Its capabilities include:
- Support adaptive streaming.
- Let the viewer choose a streaming bit rate.
- Automatically preload multiple videos.
- Play streams with Widevine, PlayReady, or ClearKey DRM protection.
- Insert ads.
- Add captions or subtitles with text tracks.
- Play saved media offline.
This replaces the default video controls with the Akamai control bar.
You will need four files: dash.all.min.js ControlBar.js controlbar.css icomoon.ttf
RESETRUNFULL
You will need four files: dash.all.min.js ControlBar.js controlbar.css icomoon.ttf
RESETRUNFULL
<!DOCTYPE html><html>
<head>
<script src="/shared/dash.all.min.js"></script>
<script src="/shared/ControlBar.js"></script>
<link rel="stylesheet" type="text/css" href="/shared/controlbar.css"/>
<style>
video {
width: 100%;
}
.dash-video-player {
position: relative; /* This position relative is needed to position the menus */
margin: 0 auto;
line-height: 1;
width: 75%;
}
</style>
</head>
<body style="height:800px" onload="init()">
<script>
function init() {
var url = 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd';
var videoElement = document.querySelector('video');
var player = dashjs.MediaPlayer().create();
player.initialize(videoElement, url, true);
var controlbar = new ControlBar(player);
controlbar.initialize();
}
</script>
<div class="dash-video-player ">
<div class="videoContainer" id="videoContainer">
<video preload="auto" autoplay=""></video>
<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">
<div id="seekbar" class="seekbar seekbar-complete">
<div id="seekbar-buffer" class="seekbar seekbar-buffer"></div>
<div id="seekbar-play" class="seekbar seekbar-play"></div>
</div>
</div>
</div>
</div>
</div>
</body></html>
Note that the video URL above points to a Media Presentation Description (MPD) file, thus disabling direct downloading of the video. To prepare the MPD file, you can use either
Today, MPEG-DASH is being deployed increasingly, accelerated by services such as Netflix and Google YouTube, which have recently switched to this new standard. With these two major sources of traffic, MPEG-DASH already accounts for 50% of total Internet traffic.