Class s7sdk.video.AudioCaptionsMenu
The AudioCaptionsMenu is a user interface component that is typically used to select audio and subtitle.
The component can be grouped with audio caption button to toggle menu.
Currently this component does not support any modifiers.
Defining Appearance using CSS
You can define the appearance of the AudioCaptionsMenu component using CSS rules. All Adobe Experience Viewers HTML5 SDK components use class selectors for styling. You can style the body of the AudioCaptionsMenu component by using
the .s7audiocaptionsmenu class selector. The styles that are associated with this class selector are applied to all instances of the AudioCaptionsMenu component. You can style particular instances by prefixing
the class rule with the instance #id. For example, styling rules for #myComp.s7audiocaptionsmenu are applied only to the particular AudioCaptionsMenu instance.
The styling of the sub-elements using class selectors, like .list for example, must be specified in the form of the descendant class selectors. That is,
they must follow the main class selector separated by a space, such as .s7audiocaptionsmenu .list.
For more information on component styling see the Adobe Experience Viewers HTML5 SDK User Guide and the default styles section.
| CSS Class | Attribute Selector | Description |
.s7audiocaptionsmenu | (None) | Define appearance of AudioCaptionsMenu container. |
.s7audiocaptionsclosebutton | (None) | Define appearance of close button for menu when displayed on small screen device |
.header | (None) | Define appearance of header in audio caption menu |
.section | (None) | Define appearance of audio or subtitle section in the menu |
.title | (None) | Define appearance of audio or subtitle section title |
.list | (None) | Define appearance of audio or subtitle list |
.li | (None) | Define appearance of list item in audio or subtitle list |
Localizable Symbols
AudioCaptionsMenu also has a text symbol that you can localize either in a preset or in the viewer page though the mechanisms
provided by the ParameterManager. For more information on localization consult the ParameterManager
API documentation and Adobe Experience Viewers HTML5 SDK User Guide.
| Symbol | Description |
AudioCaptionsMenu.AUDIO | Defines a localized text for audio section title |
AudioCaptionsMenu.SUBTITLES | Defines a localized text for subtitle section title |
| Constructor Attributes | Constructor Name and Description |
|---|---|
|
s7sdk.video.AudioCaptionsMenu(container, settings, compId)
|
| Method Attributes | Method Name and Description |
|---|---|
|
dispose()
Dispose is used to remove itself and all sub-elements from the DOM
|
|
|
Focus first item in the menu
|
|
|
hide()
Hide audio caption menu
|
|
|
onHide()
Listener which get triggered when menu is hidden
|
|
|
onTrackSelected(event, obj)
Listener for track selection
|
|
|
setMenuItems(audioTracks, textTracks)
Used to set audio and subtitle tracks
|
|
|
toggle()
Toggle audio caption menu
|
Default styles for AudioCaptionsMenu:
.s7audiocaptionsmenu {
margin:0;
padding:10px;
box-sizing:border-box;
display:none;
flex-direction:column;
z-index:10000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:rgba(255, 255, 255, 0.65);
background-color:#333333;
border-radius:8px;
}
.s7audiocaptionsmenu.is-shown {
display:flex;
}
.s7audiocaptionsmenu .header {
display:none;
justify-content:end;
align-items:center;
}
.s7audiocaptionsmenu .wrapper {
display:flex;
justify-content:center;
box-sizing:inherit;
}
.s7audiocaptionsmenu .section {
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
box-sizing:inherit;
}
.s7audiocaptionsmenu .section + .section {
margin-left:10px;
}
.s7audiocaptionsmenu .title {
box-sizing:inherit;
width:100%;
color:#FFFFFF;
padding-left:15px;
}
.s7audiocaptionsmenu .list {
box-sizing:inherit;
margin:10px 0 0 0;
padding:0 10px 0 0;
list-style-type:none;
height:100%;
width:150px;
max-height:250px;
overflow-y:auto;
overscroll-behavior:contain;
scroll-behavior:smooth;
}
.s7audiocaptionsmenu .list::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
background-color:#737373;
}
.s7audiocaptionsmenu .list::-webkit-scrollbar {
width:5px;
background-color:#737373;
}
.s7audiocaptionsmenu .list::-webkit-scrollbar-thumb {
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
background-color:#F5F5F5;
}
.s7audiocaptionsmenu li {
position:relative;
display:block;
box-sizing:border-box;
width:100%;
max-width:150px;
cursor:pointer;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
padding:5px 5px 5px 15px;
}
.s7audiocaptionsmenu li::before {
display:none;
position:absolute;
content:"\2713";
height:100%;
width:100%;
left:0;
color:#FFFFFF;
}
.s7audiocaptionsmenu li.active::before {
display:inline-block;
}
.s7audiocaptionsmenu li.active, .s7audiocaptionsmenu li:hover {
color:#FFFFFF;
}
.s7audiocaptionsclosebutton {
position:relative;
width:45px;
height:45px;
font-size:45px;
}
.s7audiocaptionsclosebutton:after {
content:"\00d7";
position:absolute;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
- Parameters:
- {String|Container} container
- The reference to
Containerinstance,ControlBarinstance or the ID of the parent DOM element to which the component is added as a child - {s7sdk.ParameterManager} settings
- A parameter manager instance that represents the desired configuration.
- {String} compId
- An optional parameter that specifies the ID of the component DOM element.
- Parameters:
- {Event} event
- click or keyboard event
- {Object} obj
- Object containing track id, track type e.g. subtitle, audio
- Parameters:
- audioTracks
- textTracks