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:

(Excellent demos of Dash.js can be found here.)

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
<!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 ffmpeg or mp4box.

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.