Hello guys,
Is it possible to configure jwplayer to show current selected bitrate ?
For example i have 4 qualities in my playlist: 240p, 360p, 480p, 720p and player is configure to select each quality according to users bandwidth (Auto,240p,360p,480p,720p)
I want to configure jwplayer to show which quality it has selected ( for example Auto(360p) ) ...
Thanks
Hi there,
I just want to make sure I am understanding you correctly. Are you saying that you want the current quality to be shown instead of the regular HD button in the control bar?
Please let me know. Thanks.
Hello again,
No No, I meant something like this:
http://sm.uploads.im/d/HrugL.png
Thank you
Hi there,
You should be able to do this using our API, JavaScript and some CSS. I have an example of this linked below and you can see the code responsible on the “Code” tab of the page.
http://qa.jwplayer.com/~abussey/demos/2016/oct/91812-auto-label.html
Thank you!
Thank you so much for your attention Alex
but i cannot open the link that you've just sent
Best Regards
That’s odd, I tried clicking the link in my response and it works for me. I’ve pasted the code below:
playerInstance.on("visualQuality", function(evt) {
if ( evt.mode == "auto" ) {
var playerElement = document.getElementById(playerInstance.getConfig().id);
playerElement.getElementsByClassName("jw-icon-hd")[0].getElementsByClassName("jw-item-0")[0].innerHTML = "Auto (" + evt.level.label + ")";
}
});Please let me know if you need any more help or have any other questions.
Thank you!
Thank You i got it worked!!
Hello again Alex,
One more question,
is this suppose to work with DASH too ?
cause what facing this issue when having DASH playlist:
http://sj.uploads.im/d/RV4GD.png
Thank you
It should work. It looks like the .on(“visualQuality”) event returns all of the same information for DASH streams as they do for HLS. Are you able to provide a URL to a reproduction page with the DASH stream embedded so I may take a look?
Hello Alex,
You can check this link out:
http://hipdesign.ir/video/test/vod-dash.html
As you can see in this player, "Auto" label is shown as "Auto (Auto)"
It looks like the DASH stream is not returning evt.level.label so that is why it is not working properly. I would suggest changing this:
"Auto <small>(" + evt.level.label + ")</small>"to this:
"Auto <small>(" + evt.level.height + "p)</small>"Please let me know if you need any more help or have any other questions.
Thank you!