Usage

You can use it from JSDelivr https://cdn.jsdelivr.net/npm/@clappr/stats-plugin@latest/dist/clappr-stats.min.js or as a npm package.

<script>
    var player = new Clappr.Player({
      parentId: '#player',
      plugins: [ClapprStats],
      source: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
      height: 360,
      width: 640,
      clapprStats: {
        // optional: time in miliseconds for each report.
        // default: 5000
        runEach: 5000,
        // optional: callback function.
        // default: console.log
        onReport: (metrics) => {console.log(metrics)},
        // Fire PERCENTAGE_EVENT when video complete some percentage.
        // default: []
        onCompletion: [10, 20, 55, 100],
        // optional: provide an img uri hosted at the same place as your farm
        // or near of it prefferable 1x1px, without caching.
        // default: none
        uriToMeasureLatency: 'http://www.example.com/images/tv/pixel-1x1-red.gif',
        // optional: provide some assets uris hosted at the same place as your farm
        // or near of it prefferable in an uncompressible file format, without caching.
        // default: none
        urisToMeasureBandwidth: [
          {url: 'http://www.example.com/images/tv/500kb.jpg', timeout: 3000},
          {url: 'http://www.example.com/images/tv/1mb.jpg', timeout: 6000},
          {url: 'http://www.example.com/images/tv/5mb.jpg', timeout: 12000}
        ],
        // optional: number of reports between two consecutive bandwidth tests.
        // default: 10
        runBandwidthTestEvery: 10
      }
    })
</script>

Metrics

{
  counters: {
    play: 0, // number of plays
    pause: 0, // number of pauses
    error: 0, // number of errors
    buffering: 0, // number of bufferings
    decodedFrames: 0, // number of decoded frames (when available)
    droppedFrames: 0, // number of dropped frames (when available)
    fps: 0, // frames per second (when available)
    changeLevel: 0, // number of adaptative bitrate changes
    seek: 0, // number of seeks
    fullscreen: 0, // number of times that user went to fullscreen
    dvrUsage: 0 // number of time that user used dvr seek (at live stream)
  },
  timers: {
    startup: 0, // time (ms) since user click/touch play (intent to play) to the play
    watch: 0, // time (ms) of watched content (does not include pause and buffering)
    pause: 0, // time (ms) of paused content
    buffering: 0, // time (ms) of buffering
    session: 0, // time (ms) of session (sum of watch+pause+buffering)
    latency: 0, // time (ms) of latency between user and the provided uri
  },
  extra: {
    playbackName: '', // playback name (hls, html5_video, flashls)
    playbackType: '', // vod or live
    buffersize: 0, // buffersize in ms
    duration: 0, // duration time in ms
    currentTime: 0, // current time in ms
    bitratesHistory: [], // the bitrates changes history
    bitrateWeightedMean: 0, // bitrate weighted mean (bps)
    bitrateMostUsed: 0, // most used (based on time) bitrate (bps)
    watchHistory: [], // an array of an array of watched range time ex: [0, 2200]
    watchedPercentage: 0, // % of watched time
    bufferingPercentage: 0, // % of buffering time
    bandwidth: 0, // user bandwidth (bps)
  }
}