Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
This two plugin work with each other. The base for it is the Stats
while NerdStats
plugin is a UI wrapper for showing the info in real time.
Plugin | Original | Fork | Npm |
---|---|---|---|
Stats | Original | Fork | Npm |
NerdStats | Original | Fork | Npm |
<template> <v-clappr-player ref="clappr" id="stats-player" source="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" width="100%" :clappr-stats="clapprStats" :aspect-ratio="16 / 9" /> </template> <script> import VClapprPlayer from 'v-clappr-player' export default { components: { VClapprPlayer }, computed: { clapprStats () { return { // 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>
The metrics
returned by the onReport
method is an Object as you see below:
{ 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) } }
<template> <v-clappr-player ref="clappr" id="stats-player" source="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" width="100%" :clappr-stats="clapprStats" :clappr-nerd-stats="clapprNerdStats" :aspect-ratio="16 / 9" /> </template> <script> import VClapprPlayer from 'v-clappr-player' export default { components: { VClapprPlayer }, computed: { clapprStats () { // You still can pass clapprStats to overide the options defaults. (optional) return { runEach: 7000 } }, clapprNerdStats () { return { // Optional: provide multiple combination of keyboard shortcuts to show/hide the statistics. // For reference, visit: https://github.com/ccampbell/mousetrap. // Default: ['command+shift+s', 'ctrl+shift+s'] shortcut: ['command+shift+s', 'ctrl+shift+s'], // Optional: position of the icon to show/hide the statistics. // Values: 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'none' // Default: 'top-right' iconPosition: 'top-left' } } }, } </script>
width
/ height
px
and %
use in resolution