当用户单击视频播放器时,全屏按钮会使其进入或退出全屏模式。
您可以按CSS调整全屏按钮的大小、外观和位置,以便相对于包含该按钮的控制栏。
全屏按钮的外观由CSS类选择器控制:
.s7video360viewer .s7fullscreenbutton
全屏按钮的CSS属性
顶端 |
从上边框的位置,包括内边距。 |
右 |
从右边框的位置,包括内边距。 |
左侧 |
从左边框开始的位置,包括内边距。 |
底部 |
从下边框的位置,包括内边距。 |
width |
全屏按钮的宽度。 |
height |
全屏按钮的高度。 |
背景图像 |
给定按钮状态的显示图像。 |
背景位置 |
在图稿Sprite中放置(如果使用CSS Sprite)。 请参阅 CSS Sprite 。 |
此按钮同时支持state
和selected
属性选择器,它们可用于将不同的外观应用到不同的按钮状态。 具体而言,selected='true'
对应于“全屏”状态,selected='false'
对应于“正常”状态。
按钮工具提示可进行本地化。 有关更多信息,请参阅用户界面元素的本地化 。
示例 — 设置一个32 x 32像素的全屏按钮,并距控制栏的上边缘和右边缘6像素。此外,在选择或未选择时,还会针对四个不同按钮状态中的每个状态显示不同的图像。
.s7video360viewer . s7fullscreenbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7video360viewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7video360viewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7video360viewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7video360viewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7video360viewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7video360viewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7video360viewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7video360viewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}