merging release 1.5.1

Dash-Industry-Forum · Oct 14, 2015 · ba275e6 · ba275e6
2 parents 042ea1d + 6cef2fb
commit ba275e6
Show file tree

Hide file tree

Showing 46 changed files with 602 additions and 277 deletions.
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@ Put the following code in your web page
 <body onLoad="Dash.createAll()">
    <div>
        <video class="dashjs-player" autoplay preload="none" controls="true">
-              <source src="http://dash.edgesuite.net/envivio/dashpr/clear/Manifest.mpd" type="application/dash+xml"/>
+              <source src="http://dash.edgesuite.net/envivio/Envivio-dash2/manifest.mpd" type="application/dash+xml"/>
        </video>
    </div>
 </body>
@@ -70,7 +70,7 @@ Add dash.all.js to the end of the body.
 Now comes the good stuff. We need to create a dash context. Then from that context we create a media player, initialize it, attach it to our "videoPlayer" and then tell it where to get the video from. We will do this in an anonymous self executing function, that way it will run as soon as the page loads. So, here is how we do it:
 ``` js
 (function(){
-    var url = "http://dash.edgesuite.net/dash264/TestCases/1c/qualcomm/2/MultiRate.mpd";
+    var url = "http://dash.edgesuite.net/envivio/Envivio-dash2/manifest.mpd";
     var context = new Dash.di.DashContext();
     var player = new MediaPlayer(context);
     player.startup();
@@ -93,7 +93,7 @@ When it is all done, it should look similar to this:
         <script src="yourPathToDash/dash.all.js"></script>
         <script>
             (function(){
-                var url = "http://dash.edgesuite.net/akamai/test/caption_test/ElephantsDream/elephants_dream_480p_heaac5_1.mpd";
+                var url = "http://dash.edgesuite.net/envivio/Envivio-dash2/manifest.mpd";
                 var context = new Dash.di.DashContext();
                 var player = new MediaPlayer(context);
                 player.startup();

diff --git a/build/package.json b/build/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dashjs",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "devDependencies": {
     "grunt": "~0.4.2",
     "grunt-contrib-connect": "~0.7.1",

diff --git a/contrib/akamai/controlbar/ControlBar.js b/contrib/akamai/controlbar/ControlBar.js
@@ -32,6 +32,7 @@ var ControlBar = function(dashjsMediaPlayer) {
 
     var player = dashjsMediaPlayer,
         video,
+        videoContainer,
         currentCaptionMenuIdx = 0,
         captionMenu = null,
         lastValumeLevel = NaN,
@@ -148,13 +149,13 @@ var ControlBar = function(dashjsMediaPlayer) {
 
         setDuration = function(value){
             if (!isNaN(value)) {
-                durationDisplay.innerHTML = player.convertToTimeCode(value);
+                durationDisplay.textContent = player.convertToTimeCode(value);
             }
         },
 
         setTime = function(value){
             if (!isNaN(value)) {
-                timeDisplay.innerHTML = player.convertToTimeCode(value);
+                timeDisplay.textContent = player.convertToTimeCode(value);
             }
         },
 
@@ -186,14 +187,16 @@ var ControlBar = function(dashjsMediaPlayer) {
         },
 
         enterFullscreen = function () {
-            if (video.requestFullscreen) {
-                video.requestFullscreen();
-            } else if (video.msRequestFullscreen) {
-                video.msRequestFullscreen();
-            } else if (video.mozRequestFullScreen) {
-                video.mozRequestFullScreen();
+            var element = videoContainer || video;
+
+            if (element.requestFullscreen) {
+                element.requestFullscreen();
+            } else if (element.msRequestFullscreen) {
+                element.msRequestFullscreen();
+            } else if (element.mozRequestFullScreen) {
+                element.mozRequestFullScreen();
             } else {
-                video.webkitRequestFullScreen();
+                element.webkitRequestFullScreen();
             }
             videoController.classList.add('video-controller-fullscreen');
             window.addEventListener("mousemove", onFullScreenMouseMove);
@@ -281,7 +284,7 @@ var ControlBar = function(dashjsMediaPlayer) {
                 captionItem.id = "captionItem_"+i
                 captionItem.index = i;
                 captionItem.selected = false;
-                captionItem.innerHTML = i === 0 ? tracks[i].kind +" off" : tracks[i-1].lang + " : " + tracks[i-1].kind; //subtract to offset for off button.
+                captionItem.textContent = i === 0 ? tracks[i].kind +" off" : tracks[i-1].lang + " : " + tracks[i-1].kind; //subtract to offset for off button.
                 captionItem.onmouseover = function(e){
                     if (this.selected !== true){
                         this.classList.add("caption-item-over");
@@ -374,6 +377,7 @@ var ControlBar = function(dashjsMediaPlayer) {
             }
 
             video.controls = false;
+            videoContainer = player.getVideoContainer();
             captionBtn.classList.add("hide");
 
             playPauseBtn.addEventListener("click", onPlayPauseClick);
@@ -387,7 +391,7 @@ var ControlBar = function(dashjsMediaPlayer) {
             video.addEventListener("timeupdate", onPlayTimeUpdate);
             video.addEventListener("seeked", onSeeked);
             document.addEventListener("fullscreenchange", onFullScreenChange, false);
-            document.addEventListener("msfullscreenchange", onFullScreenChange, false);
+            document.addEventListener("MSFullscreenChange", onFullScreenChange, false);
             document.addEventListener("mozfullscreenchange", onFullScreenChange, false);
             document.addEventListener("webkitfullscreenchange", onFullScreenChange, false);
             player.addEventListener(MediaPlayer.events.TEXT_TRACKS_ADDED, onTracksAdded);
@@ -435,7 +439,7 @@ var ControlBar = function(dashjsMediaPlayer) {
             video.removeEventListener("timeupdate", onPlayTimeUpdate);
             video.removeEventListener("seeked", onSeeked);
             document.removeEventListener("fullscreenchange", onFullScreenChange);
-            document.removeEventListener("msfullscreenchange", onFullScreenChange);
+            document.removeEventListener("MSFullscreenChange", onFullScreenChange);
             document.removeEventListener("mozfullscreenchange", onFullScreenChange);
             document.removeEventListener("webkitfullscreenchange", onFullScreenChange);
             player.removeEventListener(MediaPlayer.events.TEXT_TRACKS_ADDED, onTracksAdded);

diff --git a/contrib/akamai/controlbar/README.md b/contrib/akamai/controlbar/README.md
@@ -2,7 +2,7 @@
 
 1. **Import CSS and JS**
 ```
-<link rel="stylesheet" href="../../contrib/akamai/controlbar/contolbar.css">
+<link rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css">
 <script src="../../contrib/akamai/controlbar/ControlBar.js"></script>
 ```
 

diff --git a/contrib/akamai/controlbar/contolbar.css → contrib/akamai/controlbar/controlbar.css b/contrib/akamai/controlbar/contolbar.css → contrib/akamai/controlbar/controlbar.css
@@ -50,14 +50,16 @@
     color: white;
     text-shadow: none;
     -webkit-font-smoothing: antialiased;
+
 }
 
 .time-display,
 .duration-display{
-    padding:10px;
+    padding:11px;
     color: white;
     font-weight: normal;
     font-size: .9em;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .time-display{
@@ -70,15 +72,15 @@
 
 .btn-play-pause{
     float: left;
-    padding:10px;
+    padding:9px 10px;
     cursor: pointer;
 }
 
 .btn-caption,
 .btn-mute,
 .btn-fullscreen {
     float: right;
-    padding:10px;
+    padding:9px 10px;
     cursor: pointer;
 }
 
@@ -113,6 +115,7 @@
 .caption-item-selected{
     font-weight: normal;
     font-size: .9em;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .caption-item-unselected{

diff --git a/contrib/webmjs/example.html b/contrib/webmjs/example.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8"/>
     <title>Dash JavaScript Player</title>
     <meta name="description" content="" />
-    <link rel="icon" type="image/png" href="http://dashpg.com/w/2012/09/dashif.ico" />
+    <link rel="icon" type="image/x-icon" href="http://dashif.org/wp-content/uploads/2014/12/dashif.ico" />
     <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
 
     <link rel="stylesheet" href="../../samples/dash-if-reference-player/app/lib/bootstrap/css/bootstrap.min.css">
@@ -24,7 +24,7 @@
     <!-- https://github.com/eu81273/angular.treeview -->
     <script src="../../samples/dash-if-reference-player/app/lib/angular.treeview/angular.treeview.min.js"></script>
 
-	<script src="dash.webm.debug.js"></script>
+    <script src="dash.webm.debug.js"></script>
 
     <!-- App -->
     <script src="../../samples/dash-if-reference-player/app/metrics.js"></script>

diff --git a/samples/ad-insertion/adinsertion_inband.html b/samples/ad-insertion/adinsertion_inband.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8"/>
     <title>Dash JavaScript Player</title>
     <meta name="description" content="" />
-    <link rel="icon" type="image/png" href="http://dashpg.com/w/2012/09/dashif.ico" />
+    <link rel="icon" type="image/x-icon" href="http://dashif.org/wp-content/uploads/2014/12/dashif.ico" />
     <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
     <link href="style.css" rel="stylesheet" type="text/css" />
     <script src="../../dist/dash.debug.js"></script>
@@ -59,4 +59,4 @@
 })();
 </script>
 </body>
-</html>
+</html>
diff --git a/samples/ad-insertion/adinsertion_inline.html b/samples/ad-insertion/adinsertion_inline.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8"/>
     <title>Dash JavaScript Player</title>
     <meta name="description" content="" />
-    <link rel="icon" type="image/png" href="http://dashpg.com/w/2012/09/dashif.ico" />
+    <link rel="icon" type="image/x-icon" href="http://dashif.org/wp-content/uploads/2014/12/dashif.ico" />
     <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
     <link href="style.css" rel="stylesheet" type="text/css" />
-	<script src="../../dist/dash.debug.js"></script>
+    <script src="../../dist/dash.debug.js"></script>
     <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 
 </head>

diff --git a/samples/ad-insertion/xlink.html b/samples/ad-insertion/xlink.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8"/>
     <title>Dash JavaScript Player</title>
     <meta name="description" content="" />
-    <link rel="icon" type="image/png" href="http://dashpg.com/w/2012/09/dashif.ico" />
+    <link rel="icon" type="image/x-icon" href="http://dashif.org/wp-content/uploads/2014/12/dashif.ico" />
     <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
     <link href="style.css" rel="stylesheet" type="text/css" />
-	<script src="../../dist/dash.debug.js"></script>
+    <script src="../../dist/dash.debug.js"></script>
 
 </head>
 <body ng-controller="DashController">

diff --git a/samples/captioning/caption_vtt.html b/samples/captioning/caption_vtt.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8"/>
     <title>WebVTT Dash Demo</title>
     <meta name="description" content="" />
-    <link rel="icon" type="image/png" href="http://dashpg.com/w/2012/09/dashif.ico" />
+    <link rel="icon" type="image/x-icon" href="http://dashif.org/wp-content/uploads/2014/12/dashif.ico" />
 
     <script src="../../dist/dash.debug.js"></script>
 

diff --git a/samples/captioning/multi-track-captions.html b/samples/captioning/multi-track-captions.html
@@ -5,47 +5,30 @@
     <title>Multiple Language Timed Text Sample</title>
     <meta name="description" content="" />
 
+    <link rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css">
+    <script src="../../contrib/akamai/controlbar/ControlBar.js"></script>
     <script src="../../dist/dash.debug.js"></script>
 
     <script>
         var EXTERNAL_CAPTION_URL = "http://dash.edgesuite.net/dash264/TestCases/4b/qualcomm/1/ED_OnDemand_5SecSeg_Subtitles.mpd", // need to manually seek to get stream to start... issue with MPD but only sample with multi adaptations for external sidecar caption text xml
             FRAGMENTED_CAPTION_URL = "http://vm2.dashif.org/dash/vod/testpic_2s/multi_subs.mpd",
             videoElement,
+            controlbar,
             player;
 
         function startVideo() {
             var url = FRAGMENTED_CAPTION_URL,
                 context;
 
-            videoElement = document.querySelector(".dash-video-player video");
+            videoElement = document.querySelector(".videoContainer video");
             context = new Dash.di.DashContext();
             player = new MediaPlayer(context);
             player.startup();
             player.attachView(videoElement);
+            controlbar = new ControlBar(player); // Checkout ControlBar.js for more info on how to target/add text tracks to UI
+            controlbar.initialize();
             player.setAutoPlay(true);
             player.attachSource(url);
-            player.addEventListener(MediaPlayer.events.TEXT_TRACK_ADDED, onTrackAdded);
-        }
-
-        function onTrackAdded(e){
-            var selectMenu = document.getElementById("caption-menu"),
-                tracks = videoElement.textTracks,
-                ln = tracks.length;
-
-            for(var i=0; i<ln; i++){
-                var track = tracks[i],
-                    option = document.createElement("option");
-
-                option.text = track.language.toUpperCase() + " : " + track.kind;
-                option.value = i;
-                selectMenu.add(option);
-            }
-            selectMenu.selectedIndex = 1;
-            selectMenu.addEventListener("change", onCaptionMenuChange);
-        }
-
-        function onCaptionMenuChange(e){
-            player.setTextTrack(e.currentTarget.selectedIndex - 1);
         }
 
     </script>
@@ -55,16 +38,40 @@
             width: 640px;
             height: 360px;
         }
+
+        .videoContainer{
+            width: 640px;
+        }
     </style>
 
     <body onload="startVideo()">
-        <div class="dash-video-player">
-            <video controls="true"></video>
-        </div>
-        <div>
-            <select id="caption-menu">
-                <option value="-1">Turn Captions OFF</option>
-            </select>
+        <div class="videoContainer">
+            <video preload="auto" autoplay="true" > </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" title="Fullscreen">
+                    <span class="icon-fullscreen-enter"></span>
+                </div>
+                <input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01" />
+
+                <div id="muteBtn" class="btn-mute" title="Mute">
+                    <span id="iconMute" class="icon-mute-off"></span>
+                </div>
+                <div id="captionBtn" class="btn-caption" 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>
         </div>
     </body>
 </html>