Scripting - Play only on first visit Print E-mail
Article Index
Scripting
Play only on first visit

Play only on first visit

The following video is played automatically, but only if you visit this page the first time. For testing purposes, there is also a button, which can be used to reset this mechanism. So if you reload this page, the player should only start, if you previously have hit the reset button. Since cut&paste of code does not always work reliably, the code of this example can be downloaded at the bottom of this page.

JavaScript is disabled!
To display this content, you need a JavaScript capable browser.

How it works

The media code, used for this player is {flvdivid="onlyonce" enablejs="true"}acera{/flv}. As you can see, the player has been given a specific ID, so that it can be referenced later by that id. Furthermore, scripting has been enabled.

The actual effect is achieved by doing two things:

  1. Inserting the following JavaScript code in the header section of the template html. This code defines a function named startPlayerOnce(), which takes the ID of the player. It checks for a cookie by the name of "pseen_"+id and if this cookie does not yet exist, calls the predefined API function AvrPlay('p_'+id) to start the player.

     
    <script type="text/javascript">
    //<[CDATA[
    function tryStartPlayer(pid) {
       try {
           new allvideos.API(pid).play();
       } catch (e) {
           // Starting the player may fail, if the page is not yet
           // fully loaded and it does not exist yet.
           // So we retry it a little bit later.
           window.setTimeout('tryStartPlayer("'+pid+'")', 500);
       }
    }
     
    function startPlayerOnce(id) {
       // Search for the cookie
       var nameEQ = 'pseen_'+id+'=';
       var ca = document.cookie.split(';');
       // Loop over all cookie vars
       for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') {
              c = c.substring(1, c.length);
          }
          if (c.indexOf(nameEQ) == 0) {
             // If we arrive here, We found the
             // cookie and therefore simply return
             return;
          }
       }
       // If we arrive here, cookie wasn't found, so
       // let's create it and start the player
       // The new cookie expires after one year.
       var now = new Date();
       now.setTime(now.getTime() + (365 * 24 * 60 * 60 * 1000));
       var expires = ' expires='+now.toGMTString()+';';
       // If you want the cookie last for only a session lifetime
       // (next visit, the video plays once again) then uncomment
       // the following line:
       //expires = '';
       document.cookie = nameEQ + '1;'+expires+' path=/';
       tryStartPlayer('p_'+id);
    }
    // ]]>
    </script>
     
  2. Inserting the following JavaScript code after the media tag in the article. This code simply calls the previously defined function. For the ID parameter, it uses the same value that has been specified as the attribute divid in the media tag of the player.
     
    <script type="text/javascript">
    //<[CDATA[ 
    startPlayerOnce('onlyonce');
    // ]]>
    </script>
     

The code for the reset button simply erases the cookie and looks like this:

 
<script type="text/javascript">
//<[CDATA[ 
function eraseCookie(id) {
    var expires = new Date(0);
    document.cookie='pseen_'+id+'=; expires='+expires.toGMTString();
}
// ]]>
</script>
<input onclick="eraseCookie('onlyonce');" title="Reset status" type="button" value="Reset" />
 

Download

A zip file, containing the 3 code examples from above can be downloaded here.

Attention! The JavaScript API has changed in version 1.2.

The old version used the following call to start the player in tryStartPlayer:

 AvrPlay(pid);

The new aequivalent of this call now reads:

 new allvideos.API(pid).play();


Last Updated ( Saturday, 09 January 2010 19:34 )
 
Banner