Botón Reproducir/Pausar

El botón Reproducir/Pausar hace que el reproductor de vídeo reproduzca o ponga en pausa el contenido del vídeo cuando el usuario lo selecciona.

Puede cambiar el tamaño, el aspecto y la posición del botón, en relación con la barra de control que lo contiene, mediante CSS.

El siguiente selector de clase CSS controla el aspecto del botón:

.s7mixedmediaviewer .s7playpausebutton

Propiedades CSS del botón de reproducción/pausa

parte superior	Posición desde el borde superior, incluido el relleno.
derecha	Posición desde el borde derecho, incluido el relleno.
izquierda	Posición desde el borde izquierdo, incluido el relleno.
parte inferior	Posición desde el borde inferior, incluido el relleno.
width	Anchura del botón.
height	Altura del botón.
imagen de fondo	Imagen que se muestra para un estado de botón determinado.
posición de fondo	Sitúe dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte Sprites CSS .

NOTA

Este botón admite las dos variables state, selectedy replay selectores de atributos, que pueden utilizarse para aplicar diferentes aspectos a distintos estados de botones. En particular, selected='true' corresponde al estado “play” y selected='false' corresponde al estado “pause”;

replay='true' Este atributo se establece cuando el vídeo ha llegado al final y seleccionar el botón reinicia la reproducción desde el principio.

La información del botón se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Ejemplo

Para configurar un botón de reproducción/pausa de 32 x 32 píxeles y colocar seis píxeles desde el borde superior e izquierdo de la barra de control. Finalmente, muestra una imagen diferente para cada uno de los cuatro estados de botón diferentes cuando se selecciona o no.

.s7mixedmediaviewer .s7playpausebutton {
top:6px;
left:6px;
width:32px;
height:32px;
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/playBtn_up.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/pauseBtn_disabled.png); }
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/replayBtn_up.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/replayBtn_over.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/replayBtn_down.png);
}
.s7mixedmediaviewer .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/replayBtn_disabled.png);
}