Giter Club home page Giter Club logo

arh-mnajs / video-playback-tracking-using-vanilla-js Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 22 KB

Video Playback Tracking using Vanilla JavaScript allows you to easily implement video tracking features in your web applications without relying on third-party libraries or services. This repository provides a straightforward code example and a step-by-step guide to help you get started quickly.

CSS 37.88% HTML 17.79% JavaScript 44.33%
video-player video-tracking vanillajs

video-playback-tracking-using-vanilla-js's Introduction

Video Playback Tracking

Video Playback Tracking using Vanilla JavaScript

This repository provides a simple example and guide for tracking video playback events using vanilla JavaScript. With this code, you can monitor user interactions with videos, such as play, pause, seek, and completion, and use this data for analytics, user engagement analysis, or custom video player features.

Algorithm Explanation

let watched = new Array(0);
  
video.addEventListener('timeupdate', timeupdate, false);
function timeupdate() {
  currentTime = parseInt(video.currentTime);
  watched[currentTime] = 1;
  console.log(watched);
  var sum = watched.reduce(function(previousValue, currentValue) {return previousValue + currentValue}, 0);
  clock.innerHTML = (sum-1) + " secs" + ` / Total Price is $${(sum-1)*0.01.toFixed(4)}`;
}

This would be the most important code snippet in the func.js file wherein the time of the video played is tracked and converted into respective currency

let watched = new Array(0);
video.addEventListener('timeupdate', timeupdate, false);
  • Initializes an empty array called watched to keep track of watched video seconds.
  • Adds a 'timeupdate' event listener to the video element, triggering the timeupdate function when the event occurs.
function timeupdate() { ... };
currentTime = parseInt(video.currentTime);
watched[currentTime] = 1;
console.log(watched);
  • Defines the timeupdate function, which handles video playback tracking and display.
  • Retrieves the current time of the video (in seconds) and stores it in the currentTime variable.
  • Marks the current second as watched by setting the corresponding element in the watched array to 1.
  • Logs the watched array to the console, indicating which seconds have been watched (marked with 1).
var sum = watched.reduce(function(previousValue, currentValue) {return previousValue + currentValue}, 0);
clock.innerHTML = (sum-1) + " secs" + ` / Total Price is $${(sum-1)*0.01.toFixed(4)}`;
  • Calculates the sum of all elements in the watched array, representing the total number of seconds watched.
  • Updates the content of an element with the id 'clock' in the HTML to display the total number of seconds watched (subtracting 1 second to account for the initial value) and calculates a "Total Price" based on the number of seconds watched, assuming a rate of $0.01 per second. The toFixed(4) function is used to format the total price with four decimal places.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.