Problems with Akamai ControlBar.js
Created by: maral21
Environment
- [] The MPD passes the DASH-IF Conformance Tool on https://conformance.dashif.org/
- [] The stream has correct Access-Control-Allow-Origin headers (CORS)
- [] There are no network errors such as 404s in the browser console when trying to play the stream
- [] The issue observed is not mentioned on https://github.com/Dash-Industry-Forum/dash.js/wiki/FAQ
- [] The issue occurs in the latest reference client on http://reference.dashif.org/dash.js/ and not just on my page
- Link to playable MPD file:
- Dash.js version: 3.2.0
- Browser name/version: Latest Chrome
- OS name/version: Windows 10
Steps to reproduce
I am having issues with akamai ControlBar.js
- In my ts component I am doing:
var controlbar = new ControlBar(this.player); controlbar.initialize();
In my html I am doing this as the provided examples:
<div id="videoController" class="video-controller unselectable" ng-cloak="">
<div id="playPauseBtn" class="btn-play-pause" data-toggle="tooltip" data-placement="bottom" title="Play/Pause">
<span id="iconPlayPause" class="icon-play"></span>
</div>
<span id="videoTime" class="time-display">00:00:00</span>
<div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" data-toggle="tooltip" data-placement="bottom"
title="Fullscreen">
<span class="icon-fullscreen-enter"></span>
</div>
<div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
<span class="icon-bitrate"></span>
</div>
<input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01">
<div id="muteBtn" class="btn-mute control-icon-layout" data-toggle="tooltip" data-placement="bottom" title="Mute">
<span id="iconMute" class="icon-mute-off"></span>
</div>
<div id="trackSwitchBtn" class="btn-track-switch control-icon-layout" data-toggle="tooltip"
data-placement="bottom" title="Track List">
<span class="icon-tracks"></span>
</div>
<div id="captionBtn" class="btn-caption control-icon-layout" data-toggle="tooltip" data-placement="bottom"
title="Closed Caption / Subtitles">
<span class="icon-caption"></span>
</div>
<span id="videoDuration" class="duration-display">00:00:00</span>
<div class="seekContainer">
<div id="seekbar" class="seekbar seekbar-complete">
<div id="seekbar-buffer" class="seekbar seekbar-buffer"></div>
<div id="seekbar-play" class="seekbar seekbar-play"></div>
</div>
</div>
<div id="thumbnail-container" class="thumbnail-container">
<div id="thumbnail-elem" class="thumbnail-elem"></div>
<div id="thumbnail-time-label" class="thumbnail-time-label"></div>
</div>
</div>
And, including the scripts and styles, in angular.json:
./node_modules/dashjs/contrib/akamai/controlbar/controlbar.css ./node_modules/dashjs/contrib/akamai/controlbar/ControlBar.js
- If the bug is intermittent, give a rough frequency if possible
Observed behavior
Just the caption button is displayed and not the bitrate button.
I need just the bitrate button, not the caption button, so I also tried to delete the section:
<div id="captionBtn" class="btn-caption control-icon-layout" data-toggle="tooltip" data-placement="bottom"
title="Closed Caption / Subtitles">
<span class="icon-caption"></span>
</div>
In this case, the caption and bitrate button appears which does not make sense, and the play/pause button does not work.
Expected behavior
I would like if possible not to have the caption button and just the bitrate button, like here: https://reference.dashif.org/dash.js/latest/samples/control/controlbar.html.
Also it is possible that this example provided there, is not correct?? Because I do not see a caption button, and in the html provided in the example, there is a caption button.
I am doing anything wrong?