Statistics From Videos on Your Website

Statistics can be recorded in conjunction with the HTML5 video tag.

Lots of information is available, enough for a small book. This article provides code for the minimum statistics that many video self-publishers prefer to have available.

When the video is started.
When the video is viewed to the end.
The viewer's IP address.
The browser's user-agent information.
The URL of the video.
The URL of the page with the video tag.

Those will give you a good idea of which web pages people use to view your videos, which videos are viewed and how often, and how many are viewed all the way through to the end.

For aggregate information that you may find valuable when planning future videos, instructions for logging these statistics is also provided in this article:

The viewer's country obtained from their IP address.
The device type obtained from the browser's user-agent information.

Statistics are logged with your choice of format — CSV or JSON — for easy importing into a spreadsheet. If there is sufficient call for it, I'll write a dashboard for viewing the statistics.

Index

This article is rather extensive. Here is a jump-link index to the various sections.

The 3 Pieces for Minimum Statistics

The video Tag
The JavaScript

Comments
External JavaScript

The PHP Logging Script

Customization
Installation
The Statistics File

For Multiple Videos Per Page
Adding Country to Statistics
Adding Type of Device to Statistics
Testing

The 3 Pieces for Minimum Statistics

Here are the three pieces for minimum statistics.

A video tag so a video can play.
JavaScript to detect when the video is playing and when it has ended, and to send the information to the logging script.
The PHP script that does the logging.

The minimum statistics don't provide the user's country nor the device type they used. Information for those items is later in the article.

The `video` Tag

The first step is to place the video tag on the web page. Videos From Your Website describes how to implement a video tag.

The web page with the video tag needs to be on a server and accessible with a http or https URL. The reason is that the JavaScript (next section) uses Ajax and Ajax will work only on the internet.

The web page with the video tag also must be a page with a .php file name extension.

Note: For more than one video per web page, each video and its associated JavaScript needs to be published in an iframe tag. More information in the For Multiple Videos Per Page section.

The JavaScript

The JavaScript needs to be customized with the location of the PHP logging script (see The PHP Logging Script, next section). You may wish to install the logging script first so you have its location at hand.

Here is the JavaScript source code. Comments follow.

<script type="text/javascript">
/*
Video Tag Statistics
October 26, 2018
Version 1.1

Will Bontrager Software LLC
https://www.willmaster.com/
Copyright 2018 Will Bontrager Software LLC

This software is provided "AS IS," without 
any warranty of any kind, without even any 
implied warranty such as merchantability 
or fitness for a particular purpose.
Will Bontrager Software LLC grants 
you a royalty free license to use or 
modify this software provided this 
notice appears on all copies. 
*/

/* Customization */
/* At least 1, up to 3 places to customize */

// Place 1:
// The URL of the statistics logger.

var StatisticsLoggerURL = "/VideoStats/Statistics.php";

// Place 2:
// If you have the country-detection PHP script available, 
//   specify it's URL in quotes. Otherwise, specify the 
//   word false without quotes.

var CountryDetectionURL = false;

// Place 3:
// If you have the device-detection PHP script available, 
//   specify it's URL in quotes. Otherwise, specify the 
//   word false without quotes.

var DeviceDetectionURL = false;

/*** End of customization ***/
/****************************/
var Begun = false;
var Device = false;
var Country = false;
var video = document.getElementsByTagName("VIDEO")[0];
var videoSRC = video.getElementsByTagName("SOURCE")[0].src;
var viewerID = String((new Date()).getTime()).substr(-5) + "" + String(parseInt(Math.random()*(99999-10000)+1000));

if( CountryDetectionURL ) { DetectCountry(); }
if( DeviceDetectionURL ) { DetectDevice(); }

function playingHandler(e) { LogTheEvent("playing"); }
function endedHandler(e) { LogTheEvent("ended"); }

video.addEventListener('playing',playingHandler,false);
video.addEventListener('ended',endedHandler,false);

function DetectCountry()
{
    var http =  new XMLHttpRequest();
    if(! http) { return; }
    http.onreadystatechange = function()
    { 
        if(http.readyState == 4)
        {
            if(http.status == 200) { Country = http.responseText; }
        }
    }
    http.open("POST",CountryDetectionURL,true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.send( "IP=<?php echo($_SERVER['REMOTE_ADDR']) ?>" );
}

function DetectDevice()
{
    var http =  new XMLHttpRequest();
    if(! http) { return; }
    http.onreadystatechange = function()
    { 
        if(http.readyState == 4)
        {
            if(http.status == 200) { Device = http.responseText; }
        }
    }
    http.open("POST",DeviceDetectionURL,true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.send( "UA="+encodeURIComponent("<?php echo($_SERVER['HTTP_USER_AGENT']) ?>") );
}

function LogTheEvent(evnt)
{
    var http =  new XMLHttpRequest();
    if(! http) { return; }
    if( evnt == "playing" )
    {
        if( Begun ) { return; }
        Begun = true;
    }
    else if( evnt == "ended" ) { Begun = false; }
    var param = new Array();
    param.push(param,"Event="+evnt);
    param.push(param,"ID="+viewerID);
    param.push(param,"TimeStamp="+(new Date()).getTime());
    param.push(param,"IP=<?php echo($_SERVER['REMOTE_ADDR']) ?>");
    param.push(param,"VideoURL="+encodeURIComponent(videoSRC));
    param.push(param,"PageURL="+encodeURIComponent(document.URL));
    param.push(param,"Device="+(Device?encodeURIComponent(Device):""));
    param.push(param,"Country="+(Country?encodeURIComponent(Country):""));
    param.push(param,"UserAgent="+encodeURIComponent(navigator.userAgent));
    http.open("POST",StatisticsLoggerURL,true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.send( param.join("&") );
}
</script>

Comments —

There is only one place that must be customized. It's the value /VideoStats/Statistics.php on the line beginning with var StatisticsLoggerURL =.

Change /VideoStats/Statistics.php to the URL of the PHP statistics logger. Specify the URL relative to document root. (As an example, the URL relative to document root for the absolute URL http://example.com/stats/script.php is /stats/script.php)

There are two more places that may be customized. Optionally, you may install PHP scripts to obtain the user's country and the user's device type. These may also be added later.

If you have a PHP script to obtain the user's country (see Adding Country to Statistics) —

At the line beginning with var CountryDetectionURL =, change false to the URL of the script. Use the URL relative to document root and publish the URL between quotation marks.

Example:

var CountryDetectionURL = "/vids/UserCountryFromIP.php";

If you have a PHP script to obtain the user's device type (see Adding Type of Device to Statistics) —

At the line beginning with var DeviceDetectionURL =, change false to the URL of the script. Use the URL relative to document root and publish the URL between quotation marks.

Example:

var DeviceDetectionURL = "/vids/DeviceType.php";

The JavaScript can be anywhere on your web page. Near the cancel </body> tag is fine.

External JavaScript —

As an alternative to putting all of the JavaScript on your web page, the JavaScript may be imported from an external URL with a special external file name. It needs the special file name because the JavaScript itself depends on PHP to provide it with some values. See Real Time Update of External JavaScript With PHP for instructions.

The PHP Logging Script

The logging script is a PHP script that logs events to a statistics file associated with the video tag — specifically when the video first starts playing and when the video completes playing.

Here is the source code. It is followed with information about the one customization and the data statistics file.

<?php
/*
Log Video Tag Statistics
October 26, 2018
Version 1.1

Will Bontrager Software LLC
https://www.willmaster.com/
Copyright 2018 Will Bontrager Software LLC

This software is provided "AS IS," without 
any warranty of any kind, without even any 
implied warranty such as merchantability 
or fitness for a particular purpose.
Will Bontrager Software LLC grants 
you a royalty free license to use or 
modify this software provided this 
notice appears on all copies. 
*/

/* One place to customize. */
// If you wish to log with the CSV format, specify a 
//   log file name with .csv file name extension.
// If you wish to log with the JSON format, specify 
//   any other file name extension for the log file.
// The file name may contain a location if the file 
//   is to be written in a directory other than where 
//   this PHP script is installed.

$LogFileName = /stats/VideoLog.csv";

/*** End of customization ***/
/****************************/

if(count($_POST)<9){exit;}
if(strpos($LogFileName,'/')===0) { $LogFileName=(preg_replace('/',preg_quote($_SERVER['DOCUMENT_ROOT'],'/').'/','',$LogFileName)).$LogFileName; }
$_POST['TimeStamp'] = date('r',intval($_POST['TimeStamp']/1000));
if( preg_match('/\.csv$/i',$LogFileName) )
{
    $Keys = array_keys($_POST);
    if( !file_exists($LogFileName) ) { WriteCSVline($Keys,$LogFileName); }
    $ta = array();
    foreach( $Keys as $k ) { $ta[] = $_POST[$k]; }
    WriteCSVline($ta,$LogFileName);
}
else { file_put_contents($LogFileName,json_encode($_POST)."\n",FILE_APPEND); }
exit;

function WriteCSVline($arr,$file)
{
    $count = count($arr);
    for( $i=0; $i<$count; $i++ )
    {
        if( strpos($arr[$i],'"')!==false ) { $arr[$i] = str_replace('"',"\\".'"',$arr[$i]); }
        $arr[$i] = '"' . $arr[$i] . '"';
    }
    file_put_contents($file,implode(',',$arr)."\n",FILE_APPEND);
}
?>

Customization and Statistics File Information —

Customization

The customization is the location of the statistics file. When you specify the location, you are also specifying if you want the statistics file to be formatted CSV or JSON.

See 3 Ways to Specify a File Location for PHP Scripts for ways you can specify the location of the statistics file.

If the file name you specify ends with the .csv file name extension, the statistics file will be formatted CSV. Otherwise, the statistics file will be formatted JSON.

The directory where the statistics file is to be created and updated must be writable by the PHP script. On some servers, this requires a directory permissions change to 777.

If you wish to import the statistics file into your spreadsheet, probably CSV is your best option. However, some spreadsheet software will also import JSON files.

Installation

Save the customized statistics PHP script as Statistics.php (or other .php file name you prefer). Upload Statistics.php to your server and make a note of its URL.

The Statistics File

When the statistics file is created, you'll see a column labeled "ID". That is a unique number assigned to each visitor to the web pages containing your videos. The ID doesn't identify the person; instead, it is a way to identify the playing and ending entries so they can be paired with each other.

The statistics file contains these columns for each entry:

Event

This will be "playing" or "ended".
ID

This is a uniqe ID created whenever a web page with a video is loaded. The ID is used to pair the "playing" and "ended" entries when such pairing is desired. Whenever a user starts playing a video and doesn't finish it, there will be no associated "ended" entry for that ID.
TimeStamp

This is a formatted date and time stamp when the "playing" or "ended" event occurred. If there were pauses or fast forwards during the viewing, the elapsed time between the "playing" and "ended" events will be different than the length of the video.
IP

The IP address of the visitor.
VideoURL

The URL of the video that was viewed.
PageURL

The URL of the web page containing the video.
Device

The type of device the video was viewed on, if the information is available. Blank otherwise.
Country

The country the user is from, if the information is available. Blank otherwise.
UserAgent

The user-agent information provided by the browser.

The statistics data can also be viewed in HTML table format with the software found here:

JSON-formatted: JSON Into HTML Table
CSV-formatted: CSV Into HTML Table

This is the last of the pieces mentioned in the The 3 Pieces for Minimum Statistics section.

With the 3 installed, you should be good to go. Test it to verify that everything is correct, of course.

For Multiple Videos Per Page

When the same page has more than one video tag, each video and its associated JavaScript needs to be published in an iframe tag.

First, make the individual pages that will be published in the iframe tags. Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="margin:0;">

<video style="max-width:100%;" controls>
    <source src="https://example.com/vids/video.mp4" type="video/mp4">
</video>
<script type='text/javascript' src="VideosJS.php"></script>

</body>
</html>

The above is device-friendly code ready for insertion into an iframe.

style="margin:0;" specifies no margin. This removes any margin the page otherwise would bring into the iframe.

style="max-width:100%;" tells the video tab to expand to 100% of the available width, and no wider. It should then nicely fit the width of the iframe.

https://example.com/vids/video.mp4 needs to be updated with the location of the video file for this video tag.

VideosJS.php needs to be changed. It assumes the JavaScript is in an external file. If not, replace the entire script tag with the JavaScript presented earlier in this article.

To prepare JavaScript to be pulled in from an external file, see External JavaScript.

When the individual files are ready, they can be put into iframe tags.

Here is an example iframe:

<iframe 
   src="VideoA.php" 
   onload="this.style.height=this.contentWindow.document.body.scrollHeight+'px'" 
   style="width:500px; height:360px;">
</iframe>

Replace VideoA.php with the location of the web page containing the video tag to play in this iframe.

Replace width:500px; so it reflects the display width you prefer for the video.

Replace height:360px; so it reflects an approximation of the height of the video. You don't need to be accurate with this. The onload attribute in the iframe tag will adjust the height of the iframe according to the height of the video pulled in.

Make an iframe for each video page and you're good to go.

Adding Country to Statistics

To add the user's country to your video statistics:

Upload the short PHP script below.
Update the JavaScript with the PHP script's URL (see the Comments section at The JavaScript).

Here is the PHP script. Upload it to your server, into the same directory where the customized statistics PHP script Statistics.php is installed, giving it name UserCountryFromIP.php or other file name with a .php file name extension. Then make a note of its URL.

<?php
// Get country from ip-api.com. See http://ip-api.com/docs/ for usage limits.
$data = json_decode( file_get_contents("http://ip-api.com/json/{$_GET[IP]}?fields=country"), true );
echo $data['country'];
exit;
?>

When UserCountryFromIP.php is installed, specify its URL in the customization section of the JavaScript. The JavaScript has instructions.

The UserCountryFromIP.php script is designed to be easily changed if you should want to use a different geolocation provider. The script can be changed without changing anything in the JavaScript related to the video tag.

Adding Type of Device to Statistics

This requires installing two device-type PHP script files.

The first device-type PHP file is obtained from mobiledetect.net. They have a download button marked with the latest version number. The download is a ZIP file.

Here are the steps:

Download the latest version.
Expand/unzip the ZIP file.
In the directory that was created when the ZIP file was expanded, you'll see a file named Mobile_Detect.php.

Upload Mobile_Detect.php into the same directory where the customized statistics PHP script Statistics.php is installed. (No customization necessary.)

Mobile_Detect.php is frequently updated. Devices are added to the market and browsers are updated, each change introducing new user-agent information. It would be prudent to to replace your installation of Mobile_Detect.php every year or more often with the latest version.

The second device-type PHP file

When the first device-type PHP file has been put on the server, it's time for the second device-type PHP file.

The second device-type PHP file is the short PHP script in the next text box below. No customization required.

Give it name DeviceType.php or other file name with a .php file name extension. Upload DeviceType.php into the same directory on your server where Mobile_Detect.php is at. Make a note of the new script's URL.

<?php
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
echo $detect->isMobile()?($detect->isTablet()?'Tablet':'Phone'):'Computer';
exit;
?>

When DeviceType.php is installed, specify its URL in the customization section of the JavaScript. The JavaScript has instructions.

Testing

To test your installation, use a video that is at least 20 seconds long. You'll want enough time to try various things — pause, reposition the location dot, stop without ending.

Check your log file with each test to verify it is updating information.

When the log file is updating, you're good to go.

Your Videos Published On Your Website lists other articles related to publishing videos with the video tag.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.