Botón Reproducir/Pausar

El botón de reproducción/pausa hace que el reproductor de vídeo reproduzca o ponga en pausa el contenido del vídeo cuando un usuario hace clic en él.

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 los selectores de atributos state, selected y replay, que pueden utilizarse para aplicar diferentes aspectos a distintos estados de botones. En concreto, selected='true' corresponde al estado “play” y selected='false' corresponde al estado “pause”;

replay='true' se establece cuando el vídeo ha llegado al final y al hacer clic en el botón se 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; se coloca a seis píxeles del borde superior e izquierdo de la barra de control y muestra una imagen diferente para cada uno de los cuatro estados de botón diferentes cuando se selecciona o no se selecciona.

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

En esta página