Product updates · 3 min read

New feature: Analytics libraries for 3rd party video players!

We've launched libraries for your favourite video players, allowing you to add api.video's analytics into your 3rd party player!

Doug Sillars

April 1, 2021

How many people have watched my video?

How much of my video are people watching?

Is there a common abandonment time?

Are my users skipping ahead in the video?

These are questions that can be solved with api.video's analytics.

Now available with external players

api.video offers video encoding, hosting, delivery and analytics. If you do not want to use our player (or already have an integration with another player), you can use your 3rd party player to deliver the video.

Until now, when you used an external player, you lost the opportunity to gain any insights from our analytics engine. We have now launched libraries for videojs, hlsjs, and a general analytics package, allowing you to integrate api.video analytics into your customized 3rd party video player!

How does it work?

Let's look at an integration with videoJS. Here's a simple page that loads a video from api.video into videoJS, (and has added in analytics):

<head>
  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
  <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
  <script src="https://unpkg.com/@api.video/videojs-player-analytics"></script>

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="1280"
    height="720"
    poster="https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/thumbnail.jpg"
    data-setup="{}"
  >
    <source src="https://cdn.api.video/vod/vi4blUQJFrYWbaG44NChkH27/hls/manifest.m3u8" type="application/x-mpegURL" />
    
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script>
             videojs.registerPlugin('apiVideoAnalytics', VideoJsApiVideoAnalytics);
            
             var player = videojs('my-video');
	         player.apiVideoAnalytics();
			 
         </script>
</body>

To add analytics, we add the script in the head of the document:

 <script src="https://unpkg.com/@api.video/videojs-player-analytics"></script>

and then to add the analytics engine, we add the JavaScript at the end of the page:

registering the api.video analytics plugin

 videojs.registerPlugin('apiVideoAnalytics', VideoJsApiVideoAnalytics);

assigning a variable to the player

 var player = videojs('my-video');

connecting the player to the analytics plugin

player.apiVideoAnalytics();

and that's all there is to it!

Can I add metadata to the analytics?

Yes! If you replace:

player.apiVideoAnalytics();

with:

      player.apiVideoAnalytics({
        metadata: {
          player: "videojs"
        }
      });

you can collect dynamic metadata. In this case, I am assigning the value videojs to the player variable. Now, whenever anyone watches a video using this videoJS player, it will be recorded in the dynamic metadata as such (so I can break down the playback across different devices).

Querying the analytics, we can see this in action:

		{
			"session": {
				"sessionId": "ps4ZrdWqAR8mevHi4IwHoACf",
				"loadedAt": "2021-04-01T11:07:25+00:00",
				"endedAt": "2021-04-01T11:07:25+00:00",
		*		"metadata": [
					{
						"key": "player",
						"value": "videojs"
					}
				]*
			},
			"location": {
				"country": "United Kingdom",
				"city": "Chesham"
			},
			"referrer": {
				"url": "https://jsfiddle.net/",
				"medium": "unknown",
				"source": "unknown",
				"searchTerm": "unknown"
			},
			"device": {
				"type": "computer",
				"vendor": "unknown",
				"model": "Other"
			},
			"os": {
				"name": "Mac OS X",
				"shortname": "Mac OS X",
				"version": "11.2.3"
			},
			"client": {
				"type": "unknown",
				"name": "Chrome",
				"version": "89.0.4389"
			}
		}

Conclusion

We are working to make api.video integrate easily into your infrastructure. If you use a 3rd party player, you are no longer prevented from using our analytics to study the playback of your videos.

Grab the appropriate library, and try it today!

videojs

hlsjs

General analyitics package

Analytics

SDKs and libraries

JavaScript