So ever wanted to know how many people watched your YouTube video from start to finish aye?
YouTube offers some useful stats per video on their site, ie how many views did the video have, when did the views take place, what were the demographics, where did the view originate from, where did the view take place and how many people remained on your channel to view other videos after it (audience retention).
While these are very useful stats, and would normally do most content publishers, there is perhaps one statistic that is missing: how many people watched the video from start to finish, or the 'I didn't get bored shitless during the middle of your clip and navigate away' stat. I hear you thinking who might find this stat useful? Well if you are a corporate and you have hired an agency to put together a creative online campaign which a major component of is video, then you would probably want to know how well the video clips are holding the attention of your target market. Or the 'bang for the buck' measurement. So if you have been pondering how to capture this stat look no further. Well maybe take in the next few paragraphs.
The ingredients for this experiment are :-
- a website
- a page in said website which is using an embedded YouTube player to stream the video clip you wish to measure
- a database to store the statistic for full clip views
- the YouTube API, specifically their 'Chromeless Player' check it out at this link
For this example I have posted some code up on jsfiddle, to demonstrate what I will discuss in the paragrpahs below. Demo Code Here
So the first thing to do is to modify the embed code that you are using to embed your existing YouTube player on your site, you are going to replace it with the trimmed down chromeless player which YouTube refer to as being 'easy to customize within Flash or HTML'. The reason we are using the chromeless player? So we can achieve the first goal of our experiment, prevent the user from skipping or scanning the clip to ensure that it has been a valid view to the end, ie the whole clip has been played without tampering. To do this we will set up some javascript to load the chromeless player. First you will need to have a div on your page which will hold the new chromeless player.
<div id="videoDiv">Loading...</div>Next up lets include the jsapi script which will allow communication between the chromeless player and javascript functions on the page. Add the following script to the head tag of your page.
Add some javascript functions to set up the new player.
google.load('swfobject', '2.1'); function loadPlayer() { //Lets Flash from another domain call JavaScript var params = { allowScriptAccess: 'always' }; // The element id of the Flash embed var atts = { id: 'ytPlayer' }; // All of the magic handled by SWFObject swfobject.embedSWF('http://www.youtube.com/apiplayer?' + 'version=3&enablejsapi=1&playerapiid=player1', 'videoDiv', '480', '295', '9', null, null, params, atts); } // This function is automatically called by the player once it loads function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById('ytPlayer'); //Load an initial video into the player ytplayer.cueVideoById('ofV_iFBw2YE'); } function _run() { loadPlayer(); } google.setOnLoadCallback(_run); That much code will render the chromeless player with no controls, with a queued video, onto the page.
We now need the clip to fire an event as soon as it finished playing that will send data to your database to store this full view stat, but in this example we will just demonstrate this by showing a small popup window indicating the clip has finished so we will make use of YouTube's javascript API to achieve this. You can perform the rest of the plumbing to get that info into your database yourself via your preferred means be it .NET, PHP, Java or the next up and coming scripting language.
Since we are using the chromeless player with javascript API calls enabled we can access the player to find out which of the various states the player is in. The current state can be one of the following :-
- unstarted (-1)
- ended (0)
- playing (1)
- paused (2)
- buffering (3)
- video queued (5)
We are only interested in knowing when the ended (0) event has been fired. In order for us to find out we are going to add an eventlistener to fire events when the state changes to the player. Add it to the method onYouTubePlayerReady()
function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById('ytPlayer');ytplayer.addEventListener('onStateChange', 'onPlayerStateChange');
//Load an initial video into the player
ytplayer.cueVideoById('ofV_iFBw2YE'); }
Finally we will add a javascript function that will be called by the player once the state has changed, this function will handle your logic to show an alert, pump data into a db, or whatever it is you wish to do.
function onPlayerStateChange(newState) { // Gets called every time the players state changes // check if the state is the ended state (0) // then do somethingUseful() } Et voilà you now have a YouTube player that captures stats on full clip views on your web page.
