Mutable volume

The mutable volume control initially appears as a button that lets a user mute or unmute the smart crop video player sound.

When a user rolls over the button, a slider appears that allows a user to set the volume. The mutable volume control can be sized, skinned, and positioned, relative to the control bar that contains it, by CSS.

The appearance of the mutable volume area is controlled with the following CSS class selector:

.s7smartcropvideoviewer .s7mutablevolume

CSS properties of the mutable volume

top

Position from the top border, including padding.

right

Position from the right border, including padding.

width

The width of the mutable volume control.

height

The height of the mutable volume control.

background-color

The color of the mutable volume control.

The mute/unmute button appearance is controlled with the following CSS class selector:

.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton

You can control background image for each button state. The size of the button is inherited from the size of the volume control.

CSS properties of the button image

background-image

The image displayed for a given button state.

background-position

Position inside artwork sprite, if CSS sprites are used.

See CSS Sprites .

NOTE

This button supports both the state and selected attribute selectors, which can be used to apply different skins to different button states. In particular, selected='true' corresponds to the “muted” state and selected='false' corresponds to the “unmuted” state.

The vertical volume bar area is controlled with the following CSS class selector:

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume

CSS properties of the vertical volume bar area

background-color

The background color of the vertical volume.

width

The width of the vertical volume.

height

The height of the vertical volume.

The track inside vertical volume control is controlled with the following CSS class selectors:

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7track
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack

CSS properties of the vertical volume control

background-color

The background color of the vertical volume control.

width

Width of the vertical volume control.

height

Height of the vertical volume control.

The vertical volume knob is controlled with the following CSS class selector:

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7knob

CSS properties of the vertical volume control knob

background-image

Vertical volume control knob artwork.

background-position

Position inside artwork sprite, if CSS sprites are used.

See CSS Sprites .

width

Width of the vertical volume control knob.

height

Height of the vertical volume control knob.

left

Horizontal position of the vertical volume control knob.

The button tool tip can be localized. See Localization of user interface elements for more information.

Examples

To set up a mute button that is 32 x 32 pixels and positioned 6 pixels from the top, and 38 pixels from the right edge of the control bar. Display a different image for each of the four different button states when selected or not selected.

.s7smartcropvideoviewer .s7mutablevolume {
top:6px;
right:38px;
width:32px;
height:32px;
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='up'] {
background-image:url(images/mute_up.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='over'] {
background-image:url(images/mute_over.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='down'] {
background-image:url(images/mute_down.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='true'][state='disabled'] {
background-image:url(images/mute_disabled.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='up'] {
background-image:url(images/unmute_up.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='over'] {
background-image:url(images/unmute_over.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='down'] {
background-image:url(images/unmute_down.png);
}
.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton[selected='false'][state='disabled'] {
background-image:url(images/unmute_disabled.png);
}

The following is an example of how you can style the volume slider within the mutable volume control.

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume {
width:36px;
height:83px;
left:0px;
background-color:#dddddd;
}
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7track {
top:11px;
left:14px;
width:10px;
height:63px;
background-color:#666666;
}
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7filledtrack {
width:10px;
background-color:#ababab;
}
.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7knob {
width:18px;
height:10px;
left:9px;
background-image:url(images/volumeKnob.png);
}

The following is an example of how you can customize the video player so sound is disabled during playback. Add the following code to the viewer’s embed code:

                "handlers":{
                    "initComplete":function() {
                        videoViewer.getComponent("mutableVolume").setPosition(0);
                        videoViewer.getComponent("mutableVolume").deactivate();
                    }
                }

In the code example above, the volume level is set to 0 on the mutableVolume component. Then, the same component is deactivated so it cannot be used by the end user.

On this page