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 @@
}
</style>
<script>
if (window.location.search === '?flash') {
videojs.options.techOrder = ['flash'];
}
</script>
</head>
<body>
<div class="info">
......@@ -64,6 +70,7 @@
type="application/x-mpegURL">
</video>
<section class="stats">
<div class="player-stats">
<h2>Player Stats</h2>
<dl>
<dt>Current Time:</dt>
......@@ -77,7 +84,21 @@
<dt>Measured Bitrate:</dt>
<dd class="measured-bitrate-stat">0 kbps</dd>
</dl>
<h3>Bitrate Switching</h3>
</div>
<div class="event-counts">
<h2>Event Counts</h2>
<dl>
<dt>Play:</dt>
<dd class="play-count">0</dd>
<dt>Playing:</dt>
<dd class="playing-count">0</dd>
<dt>Seeking:</dt>
<dd class="seeking-count">0</dd>
<dt>Seeked:</dt>
<dd class="seeked-count">0</dd>
</dl>
</div>
<h3 class="bitrate-switching">Bitrate Switching</h3>
<div class="switching-stats">
Once the player begins loading, you'll see information about the
operation of the adaptive quality switching here.
......@@ -90,7 +111,7 @@
<script>
videojs.options.flash.swf = '../../node_modules/videojs-swf/dist/video-js.swf';
// initialize the player
var player = videojs('video');
var player = videojs('video').ready(function() {
// ------------
// Player Stats
......@@ -107,7 +128,7 @@
currentTimeStat.textContent = player.currentTime().toFixed(1);
});
player.on('progress', function() {
window.setInterval(function() {
var bufferedText = '', oldStart, oldEnd, i;
// buffered
......@@ -146,10 +167,40 @@
maximumFractionDigits: 1
}) + ' kbps';
}
}, 1000);
var trackEventCount = function(eventName, selector) {
var count = 0, element = document.querySelector(selector);
player.on(eventName, function() {
count++;
element.innerHTML = count;
});
};
trackEventCount('play', '.play-count');
trackEventCount('playing', '.playing-count');
trackEventCount('seeking', '.seeking-count');
trackEventCount('seeked', '.seeked-count');
videojs.Hls.displayStats(document.querySelector('.switching-stats'), player);
videojs.Hls.displayCues(document.querySelector('.segment-timeline'), player);
});
// -----------
// Tech Switch
// -----------
var techSwitch = document.createElement('a');
techSwitch.className = 'tech-switch';
if (player.el().querySelector('video')) {
techSwitch.href = window.location.origin + window.location.pathname + '?flash';
techSwitch.appendChild(document.createTextNode('Switch to the Flash tech'));
} else {
techSwitch.href = window.location.origin + window.location.pathname;
techSwitch.appendChild(document.createTextNode('Stop forcing Flash'));
}
document.body.insertBefore(techSwitch, document.querySelector('.stats'));
</script>
</body>
</html>
......
.tech-switch {
padding: 8px 0 0;
display: block;
}
.player-stats, .event-counts {
box-sizing: border-box;
padding: 8px;
float: left;
width: 50%;
}
h3.bitrate-switching {
clear: both;
}
.axis text,
.cue text {
font: 12px sans-serif;
......