Related Resources

Our Services

You May Also Like

How to track video viewing pattern using JavaScript?

Krunal Shah

Jul 14, 2017

2 min readLast Updated Jul 13, 2023

track video viewing pattern using JavaScript

Introduction

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

Get analytics

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 Github

Download and include library from GitHub

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

Step 2 : Use trackArr method

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.

Projects Completed till now.

Discover how we can help your business grow.

"Third Rock Techkno's work integrates complex frameworks and features to offer everything researchers need. They are open-minded and worked smoothly with the academic subject matter."

- Dr Daniel T. Michaels, NINS