irfansimsar / videojs-viewability

Video JS Viewability Functions for Multiple Videos

VideoJS Viewability

VideoJS Viewability script, allows to handle viewability for multiple videos

Demo 1

Demo 2

Usage

Step 1

Add script to your page

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

Step 2

• Create a array to hold players that init
• Push every player objects to players array

var players = [] // Create a array to hold players that init
function initPlayer (id) {
  /* Your Player Configuration */
  window[`quark-${id}`] = new videojs(`#${id}`, {
    techOrder: ['html5'],
    'autoplay': false
  });
  
  window[`quark-${id}`].src({
    src: 'sample.mp4',
    type: 'video/mp4'
  });

  /* Push player objects to players array on every init
     to handle viewability between each other */
  players.push(window[`quark-${id}`])
}

/* Init players */
initPlayer('player-1')
initPlayer('player-2')
initPlayer('player-3')

Step 3

Create new Viewability instance with players array

/* Init Viewability */
var viewability = new Viewability({
  players: players
})

videojs-viewability's Issues

Gif's in the Readme file is not showing up correctly

For example;

https://raw.githubusercontent.com/irfansimsar/videojs-viewability/master/docs/demo-video-1.gif @serdaraglamis

What is Quark id?

Hi,

I saw something named as quark in your readme file what is it? Is it necessary to work with this repo? Why are we pushing this values to the window object? Is this library working for just names start with quark?

Readme güncellenmesi

What about ES Modules?

I think using ES import syntax would be better than including script directly. Are you planning to add ES Modules support for this library?