Skip to content

brainfood / videojs-contrib-hls

Go to a project
Toggle navigation
Toggle navigation pinning
2b7c3792 by David LaPalomento
Options

Add basic stats to the example page 

Display some statistics during playback to aid debugging.
1 parent 008e3225
Inline Side-by-side
Showing 1 changed file with 76 additions and 0 deletions
...@@ -71,10 +71,86 @@ ...@@ -71,10 +71,86 @@
71 src="http://solutions.brightcove.com/jwhisenant/hls/apple/bipbop/bipbopall.m3u8" 71 src="http://solutions.brightcove.com/jwhisenant/hls/apple/bipbop/bipbopall.m3u8"
72 type="application/x-mpegURL"> 72 type="application/x-mpegURL">
73 </video> 73 </video>
74 <section class="stats">
75 <h2>Player Stats</h2>
76 <dl>
77 <dt>Current Time:</dt>
78 <dd class="current-time-stat">0</dd>
79 <dt>Buffered:</dt>
80 <dd><span class="buffered-start-stat">-</span> - <span class="buffered-end-stat">-</span></dd>
81 <dt>Seekable:</dt>
82 <dd><span class="seekable-start-stat">-</span> - <span class="seekable-end-stat">-</span></dd>
83 <dt>Video Bitrate:</dt>
84 <dd class="video-bitrate-stat">0 kbps</dd>
85 <dt>Measured Bitrate:</dt>
86 <dd class="measured-bitrate-stat">0 kbps</dd>
87 </dl>
88 </section>
74 <script> 89 <script>
75 videojs.options.flash.swf = 'node_modules/videojs-swf/dist/video-js.swf'; 90 videojs.options.flash.swf = 'node_modules/videojs-swf/dist/video-js.swf';
76 // initialize the player 91 // initialize the player
77 var player = videojs('video'); 92 var player = videojs('video');
93
94 // ------------
95 // Player Stats
96 // ------------
97
98 var currentTimeStat = document.querySelector('.current-time-stat');
99 var bufferedStartStat = document.querySelector('.buffered-start-stat');
100 var bufferedEndStat = document.querySelector('.buffered-end-stat');
101 var seekableStartStat = document.querySelector('.seekable-start-stat');
102 var seekableEndStat = document.querySelector('.seekable-end-stat');
103 var videoBitrateState = document.querySelector('.video-bitrate-stat');
104 var measuredBitrateStat = document.querySelector('.measured-bitrate-stat');
105
106
107 player.on('timeupdate', function() {
108 currentTimeStat.textContent = player.currentTime().toFixed(1);
109 });
110
111 player.on('progress', function() {
112 var oldStart, oldEnd;
113 // buffered
114 var buffered = player.buffered();
115 if (buffered.length) {
116
117 oldStart = bufferedStartStat.textContent;
118 if (buffered.start(0).toFixed(1) !== oldStart) {
119 bufferedStartStat.textContent = buffered.start(0).toFixed(1);
120 }
121 oldEnd = bufferedEndStat.textContent;
122 if (buffered.end(0).toFixed(1) !== oldEnd) {
123 bufferedEndStat.textContent = buffered.end(0).toFixed(1);
124 }
125 }
126
127 // seekable
128 var seekable = player.seekable();
129 if (seekable && seekable.length) {
130
131 oldStart = seekableStartStat.textContent;
132 if (seekable.start(0).toFixed(1) !== oldStart) {
133 seekableStartStat.textContent = seekable.start(0).toFixed(1);
134 }
135 oldEnd = seekableEndStat.textContent;
136 if (seekable.end(0).toFixed(1) !== oldEnd) {
137 seekableEndStat.textContent = seekable.end(0).toFixed(1);
138 }
139 }
140
141 // bitrates
142 var playlist = player.hls.playlists.media();
143 if (playlist && playlist.attributes.BANDWIDTH) {
144 videoBitrateState.textContent = (playlist.attributes.BANDWIDTH / 1024).toLocaleString(undefined, {
145 maximumFractionDigits: 1
146 }) + ' kbps';
147 }
148 if (player.hls.bandwidth) {
149 measuredBitrateStat.textContent = (player.hls.bandwidth / 1024).toLocaleString(undefined, {
150 maximumFractionDigits: 1
151 }) + ' kbps';
152 }
153 });
78 </script> 154 </script>
79 </body> 155 </body>
80 </html> 156 </html>
......