How to track video viewing pattern using JavaScript?

Everyone is interested in gathering data may it clicks on your website, analytics about who shared your blog or which song does people prefer to play in the morning. In nutshell data is critical.

Recently we developed a tool to track the data of the user of what he does while he is watching a video. The task came to us while we were working on a web development AngularJS and JAVA based project. The client wanted to create the heat map to analyze the user’s viewing pattern. Hence we created this using pure JavaScript

Using this data we plan to get analytics like

  1. Which portion of the video user has watched most
  2. Which portion of the video user has skipped
  3. Which portion of the video user is watching again and again

We have open sourced it and it’s free!!

Step 1:
Download and include library from GitHub

https://github.com/thirdrocktechkno/trt-video-analytics

<script type="text/javascript" src="video.js"></script>

Step 2

Create an instance of our Class with the specific Id and use the object to access the method of that class as mentioned below

var video = new Video(‘id of video tag’);
var trackArr = video.trackArr;

The method ‘trackArr’ will return you a array of tracking information. The array consist of data that would tell you which time frame of the video is watched how many time, which part has been skipped and the total length of the video. Hence the array’s zeroth element will be 1st second’s count, and the first element of the array will be 2 second’s count and so on.

Here is an example array for reference,

video.trackArr = [1,1,1,1,1,2,2,2,2,2,1,1,1,1,1,1,3,3,3,3,3,3,3,undefined,undefined,undefined,undefined,undefined,undefined,1,1,1,1,1]

So form the above we can make a conclusion that the first 5 second of the video has not be repeated while the user has repeated 5 - 10 seconds twice. Similarly the undefined will indicate that user has skipped 24 - 29 second of the video.

Try the library, it will be a great start to track your video analytics and make informed implementations.

You feedback is what keeps us going !!
Please share your feedback. :)

· · · ·

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.

QUIZ Game Development - Alexa Skill Development

Today I am going to explain many important concepts through Alexa gaming skill. At the end of this tutorial we shall a functioning Alexa gaming skill.

Read More

Mobile testing with Ranorex (Android and IOS)

Ranorex Studio supports Android and iOS mobile devices. For mobile testing, it is necessary that you should connect the device via USB (recommended) or WiFi with the computer that has Ranorex installed.

Read More

Why choose React Native app development to build cross-platform apps?

React Native app development is ideal for building cross-platform apps that allow business owners to target both iOS and Android users at once.

Read More