Puede personalizar el marco del reproductor multimedia mediante la creación y aplicación de sus propias pieles HTML.
Una piel consiste en un empaquetado. Zip archivo que contiene. Un css archivo y un sprite. PNG archivo de imagen que contiene los componentes gráficos. . El css archivo define la configuración de los componentes de la piel: barras de control, visualización, muelle, y lista de reproducción. Use su editor de imágenes favorito para diseñar y guardar los elementos visuales que componen la piel y enlace a ellos en la piel. Css archivo
|
|
skins personalizados basados en memoria flash utilizados en Lectora 16,0 años en adelante ya no funcionan. Utilice uno de los skins disponibles enLectora o convertir, reconstruir, o crear su piel personalizado deseado. |
Para crear un aspecto personalizado utilizando el nuevo formato:
Crear un sprite. PNG archivo de imagen que contiene todas las imágenes de la piel. Nombre del sprite. Png imagen de archivo el mismo que el nombre de su aspecto personalizado. Varios creadores de imágenes sprites están disponibles en la Web. Se recomienda tener botones que son de la misma anchura y altura. Además, las imágenes deben tener la misma altura que desea para la altura del controlador.
Tenga en cuenta la posición X e Y de cada una de las imágenes en el archivo de imagen del sprite. Se necesitan estas coordenadas cuando se crea el. Css archivo en el paso 3.
Por ejemplo, aquí están las posiciones y dimensiones X e Y la imagen de ejemplo de sprite se muestra en el Paso 1 para:
| imagen piel | Posición X, Y | Anchura | Altura |
| Imagen de fondo | 0, 0 | 80 | 24 |
| Botón de play | 0, 24 | 20 | 24 |
| Juega botón activable | 20, 24 | 20 | 24 |
| botón de pausa | 40, 24 | 20 | 24 |
| Pausa botón activable | 60, 24 | 20 | 24 |
| botón de pantalla completa | 0, 48 | 20 | 24 |
| botón de pantalla completa de la libración | 20, 48 | 20 | 24 |
| botón Unfullscreen | 40, 48 | 20 | 24 |
| Unfullscreen botón activable | 60, 48 | 20 | 24 |
| Botón de silencio | 0, 72 | 20 | 24 |
| botón de silencio de la libración | 20, 72 | 20 | 24 |
| botón Cancelar silencio | 40, 72 | 20 | 24 |
| No silenciar botón activable | 60, 72 | 20 | 24 |
| botón de subtítulos | 0, 96 | 24 | 24 |
| TimeHandle | 24, 96 | 6 | 16 |
Crear el. Css archivo para la piel, guiada por el archivo CSS ejemplo proporcionado a continuación. Nombre del. Css archivo de la misma medida que la piel se denomina dentro del archivo.
Dependiendo del nombre de su piel, reemplazar la muestra en consecuencia.
Por ejemplo: la muestra se va a reemplazar con. YourSkinName y sample.png va a ser reemplazado con yourSkinName.png .
Muestra:
div[id^="video"] .sample .mejs-controls {
background: url(Sprites/sample.png) 0px 0px;
height: 24px;
bottom: -24px;
}Su piel:
div[id^="video"] .yourSkinName .mejs-controls {
background: url(Sprites/yourSkinName.png) 0px 0px;
height: 24px;
bottom: -24px;
}
Cada una de las imágenes que componen la piel requiere su respectiva clase CSS. Para el fondo, utilice mejs-controles que redireccionen a la imagen de fondo en el sprite. esto se hace con el fondo url (Sprites / sample.png) 0px 0px donde 0px 0px representa la posición X e Y dentro de la imagen de sprite. Utilice las clases de audio y video de forma adecuada como se muestra en la muestra. Css a continuación.
Modificar la altura de acuerdo a su imagen. Si desea que la barra de control para estar por debajo del vídeo, cambie la propiedad de fondo en consecuencia.
Reemplazar los otros controles con su respectiva imagen y tamaños.
Por ejemplo:
.sample .mejs-controls .mejs-pause button {
width: 20px;
height: 24px;
background: url(Sprites/sample.png) no-repeat -40px -24px;
margin: 0;
padding: 0;
}
Tenga en cuenta que la posición xey son negativos para mostrar la posición de desplazamiento CSS correspondiente.
Por el carril de tiempo y control de volumen, cambiar el color de fondo a su gusto. Utilice los valores RGBA para mostrar con una transparencia alfa, y utilizar un valor hexadecimal así la compatibilidad con navegadores antiguos.
Una vez que los archivos de imagen de css y sprites son completos, comprímalos juntos. El. Zip nombre debe coincidir con su. Css nombre de archivo.
Muestra de archivo CSS
/*Make sure that this matches the name of your .css file. For example, if your .css file is called sample.css, make sure this class is called .mejs-container.sample */
.mejs-container.sample {
}
/*This is the container for all of the controller elements.*/
.sample .mejs-controls {
position:absolute;
bottom:0;
width:100%;
}
/*These 2 ID blocks define the background image for the video/audio controller for Lectora.*/
div[id^="video"] .sample .mejs-controls {
background: url(Sprites/sample.png) 0px 0px;
height: 24px;
bottom: -24px;
}
div[id^="audio"] .sample .mejs-controls {
background: url(Sprites/sample.png) 0px 0px;
height: 24px;
bottom: 0;
}
/*These 2 ID blocks define the background image for the video/audio controller for Lectora Online.*/
div[id^="vid"] .sample .mejs-controls {
background: url(Sprites/sample.png) 0px 0px;
height: 24px;
bottom: -24px;
}
div[id^="sndtobj"] .sample .mejs-controls {
background: url(Sprites/sample.png) 0px 0px;
height: 24px;
bottom: 0;
}
/*This defines the position and size of the time-slider from left and top. The time-slider is the bar that shows the progress of the media file.*/
.sample .mejs-time-slider{
left:20px;
top:4px;
height:8px;
display: inline-block;
}
/*This sets the position of the time-slider relative to the width of the controller.*/
.sample .mejs-time{
top:0px;
left: 0px;
position:relative;
}
/*This is the time code container.*/
.sample .mejs-controls .mejs-time {
background:url(Sprites/sample.png) repeat-x 0 0;
height:17px;
position: relative;
top: 0px;
}
/*This is the media progress bar.*/
.sample .mejs-controls .mejs-time-rail {
background:url(Sprites/sample.png) repeat-x 0 0;
height:22px;
}
/*This sets the color, or color and alpha depending on the browser, and height of the total time-slider bar.*/
.sample .mejs-controls .mejs-time-rail .mejs-time-total {
background: #383838;
background: rgba(0,0,0,0.6);
height: 8px;
}
/*This sets the height of the buffering time-slider bar.*/
.sample .mejs-controls .mejs-time-rail .mejs-time-buffering {
height: 8px;
}
/*This sets the color, or color and alpha depending on the browser, and height of the loaded time-slider bar.*/
.sample .mejs-controls .mejs-time-rail .mejs-time-loaded {
background: #808080;
background: rgba(128,128,128,0.3);
width: 0;
height: 8px;
}
/*This sets the color, or color and alpha depending on the browser, and height of the current time-slider bar.*/
.sample .mejs-controls .mejs-time-rail .mejs-time-current {
background: #335D7C;
background: rgba(51,93,124,0.8);
width: 0;
height: 8px;
}
/*This defines the look and position of the time-handle of the time-slider.*/
.sample .mejs-controls .mejs-time-rail .mejs-time-handle {
display: block;
border:none;
margin: 0;
width: 6px;
left: -3px;
height: 16px;
top: -5px;
background: url(Sprites/sample.png) no-repeat -24px -96px;
}
/*This would describe the time-float, but this skin does not use one.*/
.sample .mejs-controls .mejs-time-rail .mejs-time-float {
display: none;
}
/*This defines the size and position of the play/pause buttons.*/
.sample .mejs-controls .mejs-playpause-button {
top: 0px;
left: 0px;
width: 20px;
height: 24px;
}
/*This defines the play button tag.*/
.sample .mejs-controls .mejs-playpause-button button {
width: 20px;
height: 24px;
background: url(Sprites/sample.png) no-repeat 0 -24px;
margin: 0;
padding: 0;
}
/*This defines the pause button tag.*/
.sample .mejs-controls .mejs-pause button {
width: 20px;
height: 24px;
background: url(Sprites/sample.png) no-repeat -40px -24px;
margin: 0;
padding: 0;
}
/*This defines the play button hover state*/
.sample .mejs-controls .mejs-playpause-button button:hover {
background: url(Sprites/sample.png) no-repeat -20px -24px;
}
/*This defines the pause button hover state*/
.sample .mejs-controls .mejs-pause button:hover {
background: url(Sprites/sample.png) no-repeat -60px -24px;
}
/*This defines the size and position of the fullscreen/unfullscreen buttons.*/
.sample .mejs-controls .mejs-fullscreen-button {
top: 0px;
right: 12px;
width: 20px;
height: 44px;
background : none;
}
/*This defines the fullscreen button.*/
.sample .mejs-controls .mejs-fullscreen-button button {
width: 20px;
height: 24px;
background: transparent url(Sprites/sample.png) no-repeat 0 -48px;
margin: 0;
padding: 0;
}
/*This defines the unfullscreen button tag.*/
.sample .mejs-controls .mejs-unfullscreen button {
background: transparent url(Sprites/sample.png) no-repeat -40px -48px;
margin: 0;
padding: 0;
}
/*This defines the fullscreen button hover state.*/
.sample .mejs-controls .mejs-fullscreen-button button:hover {
background: transparent url(Sprites/sample.png) no-repeat -20px -48px;
}
/*This defines the unfullscreen button hover state.*/
.sample .mejs-controls .mejs-unfullscreen button:hover{
background: transparent url(Sprites/sample.png) no-repeat -60px -48px;
}
/*This defines the size and position of the mute/unmute buttons.*/
.sample .mejs-controls .mejs-volume-button {
top: 0px;
right: 0px;
width: 20px;
height: 24px;
}
/*This defines the mute button tag.*/
.sample .mejs-controls .mejs-mute button {
background: url(Sprites/sample.png) no-repeat 0 -72px;
width: 20px;
height: 24px;
margin: 0;
padding: 0;
}
/*This defines the unmute button tag.*/
.sample .mejs-controls .mejs-unmute button {
background: url(Sprites/sample.png) no-repeat -40px -72px;
width: 20px;
height: 24px;
margin: 0;
padding: 0;
}
/*This defines the mute button hover state.*/
.sample .mejs-controls .mejs-mute button:hover {
background: url(Sprites/sample.png) no-repeat -20px -72px;
}
/*This defines the unmute button hover state.*/
.sample .mejs-controls .mejs-unmute button:hover {
background: url(Sprites/sample.png) no-repeat -60px -72px;
}
/*These properties define the look and size of the outer background of the pop-up vertical volume slider.*/
.sample .mejs-controls .mejs-volume-button .mejs-volume-slider {
background: #C0C1E0;
border: solid 1px #FFFFFF;
border-width: 1px 1px 0 1px;
width: 20px;
height: 65px;
top: -65px;
left: 0px;
}
/*These properties define the inner background of the volume slider.*/
.sample .mejs-controls .mejs-volume-button .mejs-volume-total {
background: #333333;
background: rgba(0,0,0,0.8);
left: 7px;
width: 6px;
height: 50px;
}
/*These properties define the look of the volume slider amount.*/
.sample .mejs-controls .mejs-volume-button .mejs-volume-current {
left: 7px;
width: 6px;
background: #335D7C;
background: rgba(51,93,124,0.8);
height: 50px;
}
/*This property would define a volume slider handle. This skin does not use one.*/
.sample .mejs-controls .mejs-volume-button .mejs-volume-handle {
display: none;
}
/*This defines the text color of the time code.*/
.sample .mejs-controls .mejs-time span {
color: #000000;
}
/*This is the container that wraps the current time code.*/
.sample .mejs-controls .mejs-currenttime-container {
position: absolute;
top: 32px;
right: 100px;
border: solid 1px #999999;
background: #333333;
color: #FFFFFF;
padding-top: 2px;
border-radius: 3px;
}
/*This is the container that wraps the length time code.*/
.sample .mejs-controls .mejs-duration-container {
position: absolute;
top: 32px;
right: 65px;
border: solid 1px #999999;
background: #FFFFFF;
color: #333333;
padding-top: 2px;
border-radius: 3px;
color: #333333;
}
/*This defines the size and position of the captions button.*/
.sample .mejs-controls .mejs-captions-button {
position:relative;
width:24px;
right:4px;
top:0px;
}
/*This defines the captions button tag.*/
.sample .mejs-controls .mejs-captions-button button {
width:24px;
height:24px;
left:-1px;
top:0px;
background: url(Sprites/sample.png) no-repeat 0 -96px;
}
|
Puede importar pieles y añadirlos a la lista de pieles que se puede aplicar a los controladores de audio y vídeo. Para obtener detalles sobre la aplicación de una piel para el controlador de audio, consulte Applying a skin to the audio controller. Para obtener detalles sobre la aplicación de una piel para el controlador de video, consulte Applying a skin to the video controller.
|
Consulte también: |
© Copyright Trivantis 2019