This working only if video is playing on HTML5 Video Tag and browser support following properties on HTML5 Video Tag:
- webkitVideoDecodedByteCount
- webkitDroppedFrameCount
- webkitDecodedFrameCount
Tested on:
- Ubuntu 16.04 - Google Chrome #Version 50.0.2661.94 unknown (64-bit)
- Ubuntu 16.04 - Chromium #Version 49.0.2623.108 Ubuntu 16.04 (64-bit)
- Ubuntu 16.04 - Vivaldi #Version 1.1.453.52 (Stable channel) (64-bit)
- Android 5.0 - Chrome #Version 50.0.2661.89
Plugin require jQuery and jQuery Flot http://www.flotcharts.org/
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.resize.js"></script>
<script type="text/javascript" charset="utf-8" src="/dist/clappr.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/dist/clappr-bandwidth-analyzer.js"></script>Add ClapprBandwidthAnalyzer as core plugin.
var player = new Clappr.Player({
source: "http://your.video/here.m3u8",
plugins: {
'core': [ClapprBandwidthAnalyzer]
}
});How to customizе and default settings:
var player = new Clappr.Player({
'sources': ['http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4'],
'parentId': '#player-wrapper',
'plugins': {
'core': [ClapprBandwidthAnalyzer]
},
'bandwidthAnalyzer':{
'width': '50%', //width of chart container
'height': '40%', //height of chart container
'border' : '2px solid #00aba9!important', //border css of chart container
'background': 'rgba(60,63,65,.7)', //background css of chart container
'y_max': 5000, //chart yaxis max value
'y_min': 0, //chart yaxis min value
'x_timeDuration': 60, //chart xaxis is duration in seconds
'bandwidth':{
'lineWidth': 1,
'color': '#0f0' //bandwidth line color
},
'averageBandwidth':{
'lineWidth':1,
'color':'#f00' //Average bandwidth line color
}
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent