Skip to content

brainfood / videojs-contrib-hls

Go to a project
Toggle navigation
Toggle navigation pinning
c518bc3e by David LaPalomento
Options

Update stats page 

Get the stats page working after the video.js 5 update.
1 parent 6837076a
Inline Side-by-side
Showing 2 changed files with 26 additions and 21 deletions
...@@ -4,10 +4,22 @@ ...@@ -4,10 +4,22 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>video.js HLS Stats</title> 5 <title>video.js HLS Stats</title>
6 6
7 <link href="../../node_modules/video.js/dist/video-js/video-js.css" rel="stylesheet"> 7 <link href="../../node_modules/video.js/dist/video-js.css" rel="stylesheet">
8 8
9 <!-- video.js --> 9 <!-- video.js -->
10 <script src="../../node_modules/video.js/dist/video-js/video.dev.js"></script> 10 <script src="../../node_modules/video.js/dist/video.js"></script>
11
12 <!-- transmuxing -->
13 <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/stream.js"></script>
14 <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/mp4-generator.js"></script>
15 <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/lib/transmuxer.js"></script>
16 <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/flv-tag.js"></script>
17 <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/exp-golomb.js"></script>
18 <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/h264-extradata.js"></script>
19 <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/h264-stream.js"></script>
20 <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/aac-stream.js"></script>
21 <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/metadata-stream.js"></script>
22 <script src="../../node_modules/videojs-contrib-media-sources/node_modules/mux.js/legacy/segment-parser.js"></script>
11 23
12 <!-- Media Sources plugin --> 24 <!-- Media Sources plugin -->
13 <script src="../../node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js"></script> 25 <script src="../../node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js"></script>
...@@ -15,18 +27,9 @@ ...@@ -15,18 +27,9 @@
15 <!-- HLS plugin --> 27 <!-- HLS plugin -->
16 <script src="../../src/videojs-hls.js"></script> 28 <script src="../../src/videojs-hls.js"></script>
17 29
18 <!-- segment handling --> 30 <!-- m3u8 handling -->
19 <script src="../../src/xhr.js"></script> 31 <script src="../../src/xhr.js"></script>
20 <script src="../../src/flv-tag.js"></script>
21 <script src="../../src/stream.js"></script> 32 <script src="../../src/stream.js"></script>
22 <script src="../../src/exp-golomb.js"></script>
23 <script src="../../src/h264-extradata.js"></script>
24 <script src="../../src/h264-stream.js"></script>
25 <script src="../../src/aac-stream.js"></script>
26 <script src="../../src/metadata-stream.js"></script>
27 <script src="../../src/segment-parser.js"></script>
28
29 <!-- m3u8 handling -->
30 <script src="../../src/m3u8/m3u8-parser.js"></script> 33 <script src="../../src/m3u8/m3u8-parser.js"></script>
31 <script src="../../src/playlist.js"></script> 34 <script src="../../src/playlist.js"></script>
32 <script src="../../src/playlist-loader.js"></script> 35 <script src="../../src/playlist-loader.js"></script>
...@@ -34,7 +37,6 @@ ...@@ -34,7 +37,6 @@
34 <script src="../../node_modules/pkcs7/dist/pkcs7.unpad.js"></script> 37 <script src="../../node_modules/pkcs7/dist/pkcs7.unpad.js"></script>
35 <script src="../../src/decrypter.js"></script> 38 <script src="../../src/decrypter.js"></script>
36 39
37
38 <!-- player stats visualization --> 40 <!-- player stats visualization -->
39 <link href="stats.css" rel="stylesheet"> 41 <link href="stats.css" rel="stylesheet">
40 <script src="../switcher/js/vendor/d3.min.js"></script> 42 <script src="../switcher/js/vendor/d3.min.js"></script>
...@@ -67,6 +69,9 @@ ...@@ -67,6 +69,9 @@
67 width="600" 69 width="600"
68 controls> 70 controls>
69 <source 71 <source
72 src="http://solutions.brightcove.com/jwhisenant/hls/apple/bipbop/bipbopall.m3u8"
73 type="application/x-mpegURL">
74 <source
70 src="http://s3.amazonaws.com/_bc_dml/example-content/bipbop-id3/index.m3u8" 75 src="http://s3.amazonaws.com/_bc_dml/example-content/bipbop-id3/index.m3u8"
71 type="application/x-mpegURL"> 76 type="application/x-mpegURL">
72 </video> 77 </video>
...@@ -144,14 +149,14 @@ ...@@ -144,14 +149,14 @@
144 } 149 }
145 150
146 // bitrates 151 // bitrates
147 var playlist = player.hls.playlists.media(); 152 var playlist = player.tech.hls.playlists.media();
148 if (playlist && playlist.attributes && playlist.attributes.BANDWIDTH) { 153 if (playlist && playlist.attributes && playlist.attributes.BANDWIDTH) {
149 videoBitrateState.textContent = (playlist.attributes.BANDWIDTH / 1024).toLocaleString(undefined, { 154 videoBitrateState.textContent = (playlist.attributes.BANDWIDTH / 1024).toLocaleString(undefined, {
150 maximumFractionDigits: 1 155 maximumFractionDigits: 1
151 }) + ' kbps'; 156 }) + ' kbps';
152 } 157 }
153 if (player.hls.bandwidth) { 158 if (player.tech.hls.bandwidth) {
154 measuredBitrateStat.textContent = (player.hls.bandwidth / 1024).toLocaleString(undefined, { 159 measuredBitrateStat.textContent = (player.tech.hls.bandwidth / 1024).toLocaleString(undefined, {
155 maximumFractionDigits: 1 160 maximumFractionDigits: 1
156 }) + ' kbps'; 161 }) + ' kbps';
157 } 162 }
......
...@@ -86,8 +86,8 @@ ...@@ -86,8 +86,8 @@
86 86
87 var mediaDomain = function(media, player) { 87 var mediaDomain = function(media, player) {
88 var segments = media.segments; 88 var segments = media.segments;
89 var end = player.hls.playlists.expiredPreDiscontinuity_; 89 var end = player.tech.hls.playlists.expiredPreDiscontinuity_;
90 end += player.hls.playlists.expiredPostDiscontinuity_; 90 end += player.tech.hls.playlists.expiredPostDiscontinuity_;
91 end += Playlist.duration(media, 91 end += Playlist.duration(media,
92 media.mediaSequence, 92 media.mediaSequence,
93 media.mediaSequence + segments.length); 93 media.mediaSequence + segments.length);
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
160 .call(ptsAxis); 160 .call(ptsAxis);
161 }; 161 };
162 var svgRenderSegmentTimeline = function(container, player) { 162 var svgRenderSegmentTimeline = function(container, player) {
163 var media = player.hls.playlists.media(); 163 var media = player.tech.hls.playlists.media();
164 var segments = media.segments; // media.segments.slice(0, count); 164 var segments = media.segments; // media.segments.slice(0, count);
165 165
166 // setup the display 166 // setup the display
...@@ -196,7 +196,7 @@ ...@@ -196,7 +196,7 @@
196 196
197 // update everything on progress 197 // update everything on progress
198 player.on('progress', function() { 198 player.on('progress', function() {
199 var updatedMedia = player.hls.playlists.media(); 199 var updatedMedia = player.tech.hls.playlists.media();
200 var segments = updatedMedia.segments; // updatedMedia.segments.slice(currentIndex, currentIndex + count); 200 var segments = updatedMedia.segments; // updatedMedia.segments.slice(currentIndex, currentIndex + count);
201 201
202 if (updatedMedia.mediaSequence !== media.mediaSequence) { 202 if (updatedMedia.mediaSequence !== media.mediaSequence) {
...@@ -220,7 +220,7 @@ ...@@ -220,7 +220,7 @@
220 }; 220 };
221 221
222 var displayCues = function(container, player) { 222 var displayCues = function(container, player) {
223 var media = player.hls.playlists.media(); 223 var media = player.tech.hls.playlists.media();
224 if (media && media.segments) { 224 if (media && media.segments) {
225 svgRenderSegmentTimeline(container, player); 225 svgRenderSegmentTimeline(container, player);
226 } else { 226 } else {
......