Skip to content

brainfood / videojs-contrib-hls

Go to a project
Toggle navigation
Toggle navigation pinning
8f15253b by David LaPalomento
Options

Count events on the stats page 

Track player events and display counts on the stats page. Add a toggle to force Flash mode.
1 parent 7fb9357d
Inline Side-by-side
Showing 2 changed files with 70 additions and 3 deletions
...@@ -45,6 +45,12 @@ ...@@ -45,6 +45,12 @@
45 } 45 }
46 </style> 46 </style>
47 47
48 <script>
49 if (window.location.search === '?flash') {
50 videojs.options.techOrder = ['flash'];
51 }
52 </script>
53
48 </head> 54 </head>
49 <body> 55 <body>
50 <div class="info"> 56 <div class="info">
...@@ -64,6 +70,7 @@ ...@@ -64,6 +70,7 @@
64 type="application/x-mpegURL"> 70 type="application/x-mpegURL">
65 </video> 71 </video>
66 <section class="stats"> 72 <section class="stats">
73 <div class="player-stats">
67 <h2>Player Stats</h2> 74 <h2>Player Stats</h2>
68 <dl> 75 <dl>
69 <dt>Current Time:</dt> 76 <dt>Current Time:</dt>
...@@ -77,7 +84,21 @@ ...@@ -77,7 +84,21 @@
77 <dt>Measured Bitrate:</dt> 84 <dt>Measured Bitrate:</dt>
78 <dd class="measured-bitrate-stat">0 kbps</dd> 85 <dd class="measured-bitrate-stat">0 kbps</dd>
79 </dl> 86 </dl>
80 <h3>Bitrate Switching</h3> 87 </div>
88 <div class="event-counts">
89 <h2>Event Counts</h2>
90 <dl>
91 <dt>Play:</dt>
92 <dd class="play-count">0</dd>
93 <dt>Playing:</dt>
94 <dd class="playing-count">0</dd>
95 <dt>Seeking:</dt>
96 <dd class="seeking-count">0</dd>
97 <dt>Seeked:</dt>
98 <dd class="seeked-count">0</dd>
99 </dl>
100 </div>
101 <h3 class="bitrate-switching">Bitrate Switching</h3>
81 <div class="switching-stats"> 102 <div class="switching-stats">
82 Once the player begins loading, you'll see information about the 103 Once the player begins loading, you'll see information about the
83 operation of the adaptive quality switching here. 104 operation of the adaptive quality switching here.
...@@ -90,7 +111,7 @@ ...@@ -90,7 +111,7 @@
90 <script> 111 <script>
91 videojs.options.flash.swf = '../../node_modules/videojs-swf/dist/video-js.swf'; 112 videojs.options.flash.swf = '../../node_modules/videojs-swf/dist/video-js.swf';
92 // initialize the player 113 // initialize the player
93 var player = videojs('video'); 114 var player = videojs('video').ready(function() {
94 115
95 // ------------ 116 // ------------
96 // Player Stats 117 // Player Stats
...@@ -107,7 +128,7 @@ ...@@ -107,7 +128,7 @@
107 currentTimeStat.textContent = player.currentTime().toFixed(1); 128 currentTimeStat.textContent = player.currentTime().toFixed(1);
108 }); 129 });
109 130
110 player.on('progress', function() { 131 window.setInterval(function() {
111 var bufferedText = '', oldStart, oldEnd, i; 132 var bufferedText = '', oldStart, oldEnd, i;
112 133
113 // buffered 134 // buffered
...@@ -146,10 +167,40 @@ ...@@ -146,10 +167,40 @@
146 maximumFractionDigits: 1 167 maximumFractionDigits: 1
147 }) + ' kbps'; 168 }) + ' kbps';
148 } 169 }
170 }, 1000);
171
172 var trackEventCount = function(eventName, selector) {
173 var count = 0, element = document.querySelector(selector);
174 player.on(eventName, function() {
175 count++;
176 element.innerHTML = count;
149 }); 177 });
178 };
179 trackEventCount('play', '.play-count');
180 trackEventCount('playing', '.playing-count');
181 trackEventCount('seeking', '.seeking-count');
182 trackEventCount('seeked', '.seeked-count');
150 183
151 videojs.Hls.displayStats(document.querySelector('.switching-stats'), player); 184 videojs.Hls.displayStats(document.querySelector('.switching-stats'), player);
152 videojs.Hls.displayCues(document.querySelector('.segment-timeline'), player); 185 videojs.Hls.displayCues(document.querySelector('.segment-timeline'), player);
186 });
187
188 // -----------
189 // Tech Switch
190 // -----------
191
192 var techSwitch = document.createElement('a');
193 techSwitch.className = 'tech-switch';
194 if (player.el().querySelector('video')) {
195 techSwitch.href = window.location.origin + window.location.pathname + '?flash';
196 techSwitch.appendChild(document.createTextNode('Switch to the Flash tech'));
197 } else {
198 techSwitch.href = window.location.origin + window.location.pathname;
199 techSwitch.appendChild(document.createTextNode('Stop forcing Flash'));
200 }
201
202 document.body.insertBefore(techSwitch, document.querySelector('.stats'));
203
153 </script> 204 </script>
154 </body> 205 </body>
155 </html> 206 </html>
......
1 .tech-switch {
2 padding: 8px 0 0;
3 display: block;
4 }
5
6 .player-stats, .event-counts {
7 box-sizing: border-box;
8 padding: 8px;
9 float: left;
10 width: 50%;
11 }
12
13 h3.bitrate-switching {
14 clear: both;
15 }
16
1 .axis text, 17 .axis text,
2 .cue text { 18 .cue text {
3 font: 12px sans-serif; 19 font: 12px sans-serif;
......