Page Content
How to set up measurement of timing information
This guide explains Phenix's recommendations for gathering timing information for the purpose of optimizing video experiences. Following this methodology will allow for clear conversations and data comparisons (apples to apples) to enable quicker resolutions to issues and a faster path toward optimized experiences.
Instructions
Phenix recommends using the Performance API built into modern browsers.
Specifically, the performance.measure(name) function is used in
several places to mark specific points in the video delivery process.
-
Add
performance.measure()calls at key measurement points -
Gather the resulting data as JSON or CSV (JSON/HTTP POST example shown below) or show the results directly on the web page (JavaScript example shown below)
Key Measurement Points
Place calls to performance.measure with an appropriate text identifier
in at least these places:
A) First line of your JavaScript.
JavaScript
performance.measure('firstLineOfJS');B) When the video element is populated with a frame of video, in the callback of the videoElement.ontimeupdate.
JavaScript
videoElement.ontimeupdate = function () {
performance.measure("firstFrameOfVideo");
console.warn(performance.now() + ": First frame of video");
videoElement.ontimeupdate = null;
displayTimingInfo();
};Gathering Results
After your player experience is completely loaded and in a steady state
gather the information from the performance.measure() calls and send
them to a backend for recording.
JavaScript
var measures = performance.getEntriesByType('measure');
var timingJson = new Object();
timingJson.timestamp = Date.now();
for (var m = 0; m < measures.length; m++) {
timingJson[measures[m].name] = measures[m].duration;
}
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://logging-endpoint.com/path');
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.send(JSON.stringify(timingJson));Once gathered on a backend the data can be shared in JSON or CSV format.
Example:
JavaScript
[
{
"firstLineOfJS": 305.4450000054203,
"firstFrameOfVideo": 1917.670000009821
},
...
]Displaying Results
For testing purposes, you can display the timing on the page as shown in the snippet below.
JavaScript
function displayTimingInfo() {
var timingMessageElement = document.getElementById("timingMessage");
var measures = performance.getEntriesByType("measure");
var timingHtml = "";
var timingJson = new Object();
timingJson.timestamp = Date.now();
timingHtml =
"<p>This table measures time from the start of page navigation until the first frame of video.</p><table>";
for (var m = 0; m < measures.length; m++) {
timingJson[measures[m].name] = measures[m].duration;
timingHtml +=
"<tr><td>" +
measures[m].name +
"</td><td>" +
measures[m].duration +
"</td></tr>";
}
timingHtml += "</table>";
timingMessageElement.innerHTML = timingHtml;
}The output of the timing will be shown as in the example below.
v2024-06-20T23:37:00.000Z