可变音量 mutable-volume

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

undefined
undefined

可静音音量控件最初显示为按钮，允许用户将智能裁剪视频播放器声音静音或取消静音。

当用户滑过按钮时，会出现一个滑块，允许用户设置音量。可变音量控件可以由CSS相对于包含它的控制栏进行大小、外观和定位。

可变体积块区域的外观可通过以下CSS类选择器进行控制：

.s7smartcropvideoviewer .s7mutablevolume

可变卷的 CSS属性

前

上边框的位置，包括内边距。

右

从右边框定位，包括内边距。

宽度

可变音量控制的宽度。

高度

可变音量控制的高度。

背景色

可变音量控件的颜色。

静音/取消静音按钮外观由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7mutablevolume .s7mutebutton

您可以控制每个按钮状态的背景图像。按钮的大小继承自卷控件的大小。

按钮图像的 CSS属性

背景图像

针对给定按钮状态显示的图像。

背景位置

如果使用CSS sprite，则定位在图稿sprite中。

请参阅 CSS Sprite。

NOTE

此按钮同时支持state和selected属性选择器，它们可用于将不同的外观应用于不同的按钮状态。特别是，selected='true'对应于“静音”状态，selected='false'对应于“非静音”状态。

垂直音量栏区域由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume

垂直音量条区域的 CSS属性

背景色

垂直体积块的背景颜色。

宽度

垂直体积的宽度。

高度

垂直体积的高度。

垂直音量控件内的音轨由以下CSS类选择器控制：

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

垂直音量控件的 CSS属性

背景色

垂直音量控件的背景颜色。

宽度

垂直音量控件的宽度。

高度

垂直音量控制的高度。

垂直音量旋钮由以下CSS类选择器控制：

.s7smartcropvideoviewer .s7mutablevolume .s7verticalvolume .s7knob

垂直音量控制旋钮的 CSS属性

背景图像

垂直音量控制旋钮图稿。

背景位置

如果使用CSS sprite，则定位在图稿sprite中。

请参阅 CSS Sprite。

宽度

垂直音量控制旋钮的宽度。

高度

垂直音量控制旋钮的高度。

已离开

垂直音量控制旋钮的水平位置。

按钮工具提示可以本地化。有关详细信息，请参阅用户界面元素的本地化。

示例 section-e8caea0a303c425a8a637c2a47c06355

设置一个静音按钮，其大小为32 x 32像素，并从顶部定位6像素，并从控制栏的右边缘定位38像素。选择或未选择时，为四种不同的按钮状态分别显示不同的图像。

.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);
}

下面是如何在可变音量控制中设置音量滑块样式的示例。

.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);
}

以下示例介绍了如何自定义视频播放器，以便在播放期间禁用声音。将以下代码添加到查看器的嵌入代码中：

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

在上述代码示例中，mutableVolume组件上的卷级别设置为0。然后，同一组件被停用，因此最终用户无法使用该组件。

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8