![Vimeo]()
Learn how to use Vimeo’s Simple API along with PHP and jQuery to display the play counts of Vimeo videos embedded on your web site. The method described in this tutorial works asynchronously, meaning that the API calls won’t cause delays in page loading.
Learn how to use Vimeo’s Simple API along with PHP and jQuery to display the play counts of Vimeo videos embedded on your web site. The method described in this tutorial works asynchronously, meaning that the API calls won’t cause delays in page loading.» Jump to step-by-step instructions
Let me start by saying that I’m a fan of Vimeo. For years I hosted and served all my videos from my own server because I was not aware of any service that offered the kind of reliability, quality, and fine-tuned control that I require. Vimeo’s emergence changed that. I joined Vimeo about a year ago, immediately upgraded to Vimeo Plus, and now host most of my videos with them for this web site and personal use.
The benefits of Vimeo over other services are numerous, but to name one of the most crucial, they allow you to update a video file without losing your metadata, stats, and comments. It would be hard to overstate how huge this is. If you’ve ever made an adjustment to a video that you posted on a service that doesn’t allow this, you know how frustrating it is to have to decide between starting over or accepting that viewers aren’t going to see the latest and greatest version of your video.
Another example of Vimeo’s versatility is their API, which brings us to the topic at hand. The below tutorial will walk you through a straightforward way to display the number of views that your Vimeo videos have received.
You can download the scripts and a sample html file here: vimeo-stats-dax-v1.2.zip.
To see a demonstration of this method in action, take a look at the Packafoma Video page. Note that the Vimeo “plays” pop onto the screen a moment after the document loads, never holding up the loading of the other elements of the page.
If you have questions or suggestions on how these scripts could be improved, please share in the discussion.
Step-by-step tutorial:
NOTE: If you are displaying stats for only one video at a time AND you are not concerned that your page may hang occasionally while loading, you may only need the two code snippets provided in step 1.
1 Create the following PHP script and save it as vimeo-stats-dax.php. (I would suggest creating a new directory specifically for these scripts. I’ve used “vsd-scripts” in the examples.)
This function uses the Vimeo API to retrieve information about a video using its ID number and turns it into a form we can use:
<?php
function getVimeoStats($id) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://vimeo.com/api/v2/video/$id.php");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 30);
$output = unserialize(curl_exec($ch));
$output = $output[0];
curl_close($ch);
return $output;
}
?>
Now, at this point, you could display the play count for any video simply by adding the above script to the <head> of your HTML/PHP page and then adding the following code to the body of the same page exactly where you would like the data to appear. (Replace 12345678 with the Vimeo ID number of your video.)
(This next code snippet is provided as an example of a simple way to add the play count, but you do not need it if you are interested in the more advanced method that follows.)
<?php // THIS TECHNIQUE WORKS, BUT IT'S NOT RECOMMENDED $VimeoStats = getVimeoStats(12345678); // set video ID $plays = $VimeoStats['stats_number_of_plays']; echo $plays; ?>
If you are loading the play count for only one video and the count is displayed late in the document flow, the above may very well meet your needs. If that’s the case, congratulations! You have everything you need.
However, this simple method has a drawback. When the browser reaches the above command, it will stop loading the rest of the page until the response data has been received. This sometimes takes several seconds and can prevent the entire page from loading depending on the placement of the code in the document. This becomes severely problematic when retrieving play counts for multiple videos on the same page.
So we soldier on…
2 Create the following PHP script for each video for which you would like to display the play count. Save the file as vsd.12345678.php, replacing 12345678 with the ID of your video. (The filename does not have to contain this number. For instance, you may prefer to add the title of the video, but I find that using IDs helps with the configuration of the next steps.)
In the script itself, replace 12345678 with the Vimeo ID number of your video and set the proper path to your vimeo-stats-dax.php file. You will need to create a separate file for each video, although you can start with just one.
This script uses the script we created in step 1 to retrieve and display the play count of a specified video:
<?php // you can note the title of the video in this comment require($_SERVER['DOCUMENT_ROOT']."/vsd-scripts/vimeo-stats-dax.php"); // path to vimeo-stats-dax.php $VimeoStats = getVimeoStats(12345678); // set video ID $plays = $VimeoStats['stats_number_of_plays']; $likes = $VimeoStats['stats_number_of_likes']; $comments = $VimeoStats['stats_number_of_comments']; echo $plays; ?>
Notice that I’ve included several response data variables as examples, although only the play count is being outputted. For a full list of options, see response data on the Vimeo Simple API developer page.
3 Place the following in the <head> section of the HTML/PHP page that contains your video (or any page for that matter). Replace 12345678 with the video ID (same ID in both spots) and edit the path to the vsd.12345678.php file you just created. Note the pound (#) symbol in front of the first video ID. If you are displaying multiple videos on the same page, simply duplicate this line, adjusting the ID numbers for each video.
This jQuery script waits for the web page to finish loading and then runs the above PHP script to find the play count(s). It then inserts the results into the web page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#12345678').load('/vsd-scripts/vsd.12345678.php'); // set video ID; duplicate this line for multiple videos and note the title of each video in this comment
});
</script>
4 Now for the easy part: the HTML. All you have to do is add the following snippet to your same web page with the proper video ID wherever you would like the play count for that video to appear. Feel free to add CSS classes to the span if you wish to format the data.
<span id="12345678"></span>
That’s it. Now you can display those play counts with pride (or embarrassment)!