Measure First Viewhour With JavaScript

Viewhour is one of the most important key metrics which indicates your audience engagement in your contents and your service.

Let’s get started with measuring viewhour consumed by your audiences.

Installing Streamlyzer JavaScript library.

First of all, you need to install Streamlyzer JavaScript plug-in library.

In this example, we will be using JavaScript library and JWPlayer, but there are other plug-ins supporting other platforms.

To install the plug-in, below are two JavaScript library that are required.

  • jQuery – 1.9.0 or later version is recommended.
  • JSON3 for Internet Explorer (http://bestiejs.github.io/json3) – Older version (older than IE 9) of internet explorer can’t handle JSON format properly. If older version IE is required for your service, JSON3 library is required.

Download Streamlyzer JavaScript plug-in package from our dashboard. You can find szrpg.js file into src folder and place it into proper location in your web server.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="src/json3.min.js"></script>
<script src="src/szrpg.js"></script>

Initialize Observer

  • Get your customer key – In order to connect your streaming service to Streamlyzer server, you should have your customer key ready provided by us when you first sign up.Streamlyzer will see if you are sending information with valid key. If you use wrong customer key, all information will be blocked.
  • Set proper properties on creation of the Observers as well as registering callbacks
/**
 *  Load data phase
 */
var userInformation = {
             userId : 'Guest',
           userType : 'FreePlan'
};

var configurationProperties = {
           customerKey : 'CustomerKey',
 playerPlatformVersion : 'Flash18',
    mediaPlayerVersion : 'jwplayer7.5',
            abTestMark : 'A',
         cbGetDuration : function () { return jwplayer('player').getDuration() * 1000; }, // Notice: jwPlayer return duration as second.
           cbGetBuffer : function () { return jwplayer('player').getBuffer(); },
         cbGetPosition : function() { return jwplayer('player').getPosition() * 1000; }, // Notice: jwPlayer return position as second.
          cbGetBitrate : function() {
            var qualityLevels  = jwplayer('player').getQualityLevels(),
                currentQuality = jwplayer('player').getCurrentQuality();

            // currentQuality at end of movie could be negative.
            if(currentQuality &gt; 0) {
                return qualityLevels[currentQuality].bitrate;
            } else {
                return 0;
            }
          },
       cbGetResolution : function () { return "Resolution"; }
};
var channelIndex = 0;
var contentsList = [
  {
    contentsUrl: "http://content.bitsontherun.com/videos/q1fx20VZ-52qL9xLP.mp4",
    metadata: {
              userType : 'FreePlan',
                  live : false,
       liveChannelName : 'Channel02',
           serviceType : 'VOD',
             sessionId : 'adfe4fda3db1328',
   streamingServerName : 'http://content.bitsontherun.com/',
        thumbnailImage : 'http://some.thumbnailimage.com/image02.jpg',
            seriesName : 'Avata',
           episodeName : 'E01',
               movieId : 'movie02',
         movieCategory : 'Animation',
      movieSubcategory : 'MovieSubcategory',
 movieContentsProvider : 'MovieContentsProvider',
             movieRate : 'MovieRate'
    }
  },
  {
    contentsUrl: "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
    metadata: {
                  live : false,
       liveChannelName : 'Channel01',
           serviceType : 'sampleService',
             sessionId : 'adfe4fda3db1328',
   streamingServerName : 'http://clips.vorwaerts-gmbh.de/',
        thumbnailImage : 'http://some.thumbnailimage.com/image01.jpg',
            seriesName : 'Big Buck Bunny',
           episodeName : 'E01',
               movieId : 'movie01',
         movieCategory : 'Animation',
      movieSubcategory : 'MovieSubcategory',
 movieContentsProvider : 'MovieContentsProvider',
             movieRate : 'MovieRate'
    }
  }
];
  • Initialize the Observer
/**
  *  Initialize Plug-in
  *
  *  fill options as much as possible. Especially, key.
  */
var playbackObserver = new szrpg.playbackObserver(
  $.extend({},configurationProperties, contentsList[channelIndex].metadata, userInformation)
);
  • Add event handler API for tracking media player event
</pre>
<pre>/**
 *  Mapping Player Event to Plug-in
 */
jwplayer('player').onReady(function() {
  playbackObserver.onPlayerReady();
});
jwplayer('player').onPlay(function() {
  playbackObserver.onPlayerPlay();
});
jwplayer('player').onPause(function(event) {
  playbackObserver.onPlayerPaused();
});
jwplayer('player').onBuffer(function(event) {
  playbackObserver.onBufferingStart();
});
jwplayer('player').onSeek(function(event) {
  playbackObserver.onPlayerSeek(event.position * 1000, event.offset * 1000); // Be careful, it should be passed with millisecond time.
});
jwplayer('player').onQualityChange(function(event) {
  var qualityLevels = jwplayer('player').getQualityLevels();
  playbackObserver.onPlayerBitrateChange(event.currentQuality);
});
jwplayer('player').onError(function(event) {
  playbackObserver.onPlayerErrorMessage(event.message);
});
jwplayer('player').onSetupError(function(event) {
  playbackObserver.onPlayerErrorMessage(event.message);
});
jwplayer('player').onComplete(function(event) {
  playbackObserver.onPlayerComplete();
});
// You can send onPlayerStop event like this.
if (window.addEventListener) {
  window.addEventListener('beforeunload', function() {
    playbackObserver.onPlayerStop
  });
} else { // For IE
  window.attachEvent('onbeforeunload', function() {
    playbackObserver.onPlayerStop
  });
}

Now you are ready to go to your Streamlyzer dashboard to check it out.

31883431


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s