Update stats page
Get the stats page working after the video.js 5 update.
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 { | ... | ... |
-
Please register or sign in to post a comment