Puede personalizar el marco del reproductor multimedia mediante la creación y aplicación de sus propias pieles.
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 Onlne3.0 y mayor ya no va a funcionar. Utilice uno de los skins disponibles enLectora Onlne o convertir, reconstruir, o crear su piel personalizado deseado. |
El programa utiliza el formato de la piel de encargo del JW Player 5, el reproductor multimedia líder en Internet hoy en día. El jugador es fácil de configurar, personalizar y extender. Para más detalles sobre la creación de pieles para el JW Player 5, visite http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/building-skins .
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.
|
|
Sprite imágenes no deben exceder una altura de 24 píxeles. Contacto Soporte si necesita imágenes sprites más grandes superiores a 24 píxeles. |
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 | dieciséis |
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 sampleen consecuencia.
Por ejemplo:
sampleque deba sustituirse con. YourSkinName
y sample.pngde que deba sustituirse con yourSkinName.png .
Muestra :
div [id ^ = "video"] .sample .mejs-controles {
background: url (Sprites / sample.png) 0px 0px;
altura: 24px;
parte inferior: -24px;
}Su piel :
div [id ^ = "video"] .yourSkinName .mejs-controles {
background: url (Sprites / yourSkinName.png) 0px 0px;
altura: 24px;
parte inferior: -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 0pxrepresenta 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:
.mejs-controls .sample botón de pausa-.mejs {
Ancho: 20px;
altura: 24px;
background: url (Sprites / sample.png) -40px -24px no-repeat;
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
/ * Asegúrese de que este coincide con el nombre de su archivo css. Por ejemplo, si el archivo .css se llama sample.css, asegúrese de que esta clase se llama .mejs-container.sample * /
.mejs-container.sample {
}
/ * Este es el contenedor de todos los elementos del controlador. * /
.mejs-controles .sample {
position: absolute;
parte inferior: 0;
width: 100%;
}
/ * Estos 2 bloqueos de identificación definen la imagen de fondo para el controlador de vídeo / audio para Lectora. * /
div [id ^ = "video"] .sample .mejs-controles {
background: url (Sprites / sample.png) 0px 0px;
altura: 24px;
parte inferior: -24px;
}
div [id ^ = "audio"] .sample .mejs-controles {
background: url (Sprites / sample.png) 0px 0px;
altura: 24px;
parte inferior: 0;
}
/ * Estos 2 bloqueos de identificación definen la imagen de fondo para el controlador de vídeo / audio para la línea Lectora. * /
div [id = ^ "vid"] .sample .mejs-controles {
background: url (Sprites / sample.png) 0px 0px;
altura: 24px;
parte inferior: -24px;
}
div [id = ^ "sndtobj"] .sample .mejs-controles {
background: url (Sprites / sample.png) 0px 0px;
altura: 24px;
parte inferior: 0;
}
/ * Esto define la posición y el tamaño del tiempo deslizante de izquierda a derecha y de arriba. El tiempo-deslizador es la barra que muestra el progreso del archivo multimedia. * /
.mejs-tiempo-deslizador .sample {
izquierda: 20px;
superior: 4 píxeles;
altura: 8 píxeles;
display: inline-block;
}
/ * Esto establece la posición de la hora deslizante respecto a la anchura del controlador. * /
.mejs-tiempo .sample {
top: 0px;
left: 0px;
position: relative;
}
/ * Este es el contenedor de código de tiempo. * /
.sample .mejs-controls-.mejs tiempo {
background: url (Sprites / sample.png) repeat-x 0 0;
altura: 17px;
position: relative;
top: 0px;
}
/ * Esta es la barra de progreso de los medios de comunicación. * /
.sample .mejs-controls .mejs-tiempo-rail {
background: url (Sprites / sample.png) repeat-x 0 0;
altura: 22px;
}
/ * Esto ajusta el color, o el color y alfa dependiendo del navegador, y la altura de la barra deslizante tiempo total. * /
.sample .mejs-.mejs controles en tiempo-rail .mejs-tiempo total de {
background: # 383838;
fondo: RGBA (0,0,0,0.6);
altura: 8 píxeles;
}
/ * Esto ajusta la altura de la barra de almacenamiento en búfer de tiempo deslizante. * /
.sample .mejs-controls .mejs-tiempo-rail .mejs-tiempo-buffering {
altura: 8 píxeles;
}
/ * Esto ajusta el color, o el color y alfa dependiendo del navegador, y la altura de la barra de tiempo-deslizador cargado. * /
.sample .mejs-controls .mejs-tiempo-cargado .mejs-tiempo-rail {
background: # 808080;
fondo: RGBA (128,128,128,0.3);
anchura: 0;
altura: 8 píxeles;
}
/ * Esto ajusta el color, o el color y alfa dependiendo del navegador, y la altura de la barra de tiempo deslizante actual. * /
.sample .mejs-controls .mejs-tiempo-rail .mejs-tiempo-corriente {
background: # 335D7C;
fondo: RGBA (51,93,124,0.8);
anchura: 0;
altura: 8 píxeles;
}
/ * Esto define el aspecto y la posición de la hora de manejar el tiempo-deslizador. * /
.sample .mejs-controls .mejs-tiempo-rail .mejs-tiempo-asa {
bloqueo de pantalla;
border: none;
margin: 0;
anchura: 6px;
izquierda: -3px;
altura: 16px;
arriba: -5px;
background: url (Sprites / sample.png) -24px -96px no-repeat;
}
/ * Esto describir el tiempo de flotación, pero esta piel no usar uno. * /
.sample .mejs-controls .mejs-tiempo-rail .mejs-tiempo-flotador {
display: none;
}
/ * Esto define el tamaño y la posición de los botones de reproducción / pausa. * /
.sample .mejs-controls-.mejs PLAYPAUSE-botón {
top: 0px;
left: 0px;
Ancho: 20px;
altura: 24px;
}
/ * Esto define la etiqueta de botón de reproducción. * /
.mejs-controls .sample botón-botón-PLAYPAUSE .mejs {
Ancho: 20px;
altura: 24px;
background: url (Sprites / sample.png) no-repeat 0 -24px;
margin: 0;
padding: 0;
}
/ * Esto define la etiqueta de botón de pausa. * /
.mejs-controls .sample botón de pausa-.mejs {
Ancho: 20px;
altura: 24px;
background: url (Sprites / sample.png) -40px -24px no-repeat;
margin: 0;
padding: 0;
}
/ * Esto define el estado estacionario botón de reproducción * /
.sample .mejs-controles de botón .mejs-button-PLAYPAUSE: hover {
background: url (Sprites / sample.png) -20px -24px no-repeat;
}
/ * Esto define el estado estacionario botón de pausa * /
.sample .mejs-controles de botón de pausa-.mejs: hover {
background: url (Sprites / sample.png) -60px -24px no-repeat;
}
/ * Esto define el tamaño y la posición de los botones en pantalla completa / unfullscreen. * /
.sample .mejs-controls-.mejs pantalla completa botón {
top: 0px;
derecha: 12px;
Ancho: 20px;
altura: 44px;
background: none;
}
/ * Esto define el botón de pantalla completa. * /
.sample .mejs-controles de botón de pantalla completa .mejs-botón {
Ancho: 20px;
altura: 24px;
background: url transparente (Sprites / sample.png) no-repeat 0 -48px;
margin: 0;
padding: 0;
}
/ * Esto define la etiqueta de botón unfullscreen. * /
.sample botón .mejs-controls-.mejs unfullscreen {
background: url transparente (Sprites / sample.png) -40px -48px no-repeat;
margin: 0;
padding: 0;
}
/ * Esto define el estado de botón activable a pantalla completa. * /
.sample .mejs-controles de botón de pantalla completa .mejs-botones: hover {
background: url transparente (Sprites / sample.png) -20px -48px no-repeat;
}
/ * Esto define el estado de botón activable unfullscreen. * /
.sample .mejs-controls-.mejs unfullscreen botón: hover {
background: url transparente (Sprites / sample.png) -60px -48px no-repeat;
}
/ * Esto define el tamaño y la posición de los botones silencio / voz. * /
.sample .mejs-controls .mejs-volumen-botón {
top: 0px;
derecha: 0px;
Ancho: 20px;
altura: 24px;
}
/ * Esto define la etiqueta de botón de silencio. * /
.sample botón .mejs-controls-mute {.mejs
background: url (Sprites / sample.png) no-repeat 0 -72px;
Ancho: 20px;
altura: 24px;
margin: 0;
padding: 0;
}
/ * Esto define la etiqueta de botón de silencio. * /
.sample botón .mejs-controls-.mejs unmute {
background: url (Sprites / sample.png) -40px -72px no-repeat;
Ancho: 20px;
altura: 24px;
margin: 0;
padding: 0;
}
/ * Esto define el estado de botón activable mudo. * /
.sample .mejs-controles .mejs-mute botón: hover {
background: url (Sprites / sample.png) -20px -72px no-repeat;
}
/ * Esto define el estado de botón activable función de silencio. * /
.sample .mejs-controls-.mejs unmute botón: hover {
background: url (Sprites / sample.png) -60px -72px no-repeat;
}
/ * Estas propiedades definen el aspecto y el tamaño del fondo exterior de la corredera vertical volumen emergente. * /
.sample .mejs-controls-volumen-botón .mejs .mejs-volumen-deslizador {
background: # C0C1E0;
frontera: 1px solid #FFFFFF;
border-width: 1px 1px 1px 0;
Ancho: 20px;
altura: 65px;
arriba: -65px;
left: 0px;
}
/ * Estas propiedades definen el fondo interior del regulador de volumen. * /
.sample .mejs-controles .mejs-volumen-botón-.mejs volumen total de {
background: # 333333;
fondo: RGBA (0,0,0,0.8);
izquierda: 7px;
anchura: 6px;
altura: 50px;
}
/ * Estas propiedades definen el aspecto de la cantidad regulador de volumen. * /
.sample .mejs-controls-volumen-botón .mejs .mejs volumen de corriente {
izquierda: 7px;
anchura: 6px;
background: # 335D7C;
fondo: RGBA (51,93,124,0.8);
altura: 50px;
}
/ * Esta propiedad sería definir un mango deslizador de volumen. Esta piel no utiliza uno. * /
.sample .mejs-controls-volumen-botón .mejs .mejs-volume-handle {
display: none;
}
/ * Esto define el color del texto del código de tiempo. * /
.mejs-controls .sample lapso de tiempo .mejs {
color: # 000000;
}
/ * Este es el recipiente que contenga el código de tiempo actual. * /
.sample .mejs-controls-.mejs CurrentTime-contenedor {
position: absolute;
top: 32px;
derecha: 100px;
frontera: 1px solid # 999999;
background: # 333333;
de color: #FFFFFF;
padding-top: 2px;
la frontera de radio: 3px;
}
/ * Este es el contenedor que envuelve el código de tiempo de longitud. * /
.sample .mejs-controls .mejs-duración-contenedor {
position: absolute;
top: 32px;
derecha: 65px;
frontera: 1px solid # 999999;
fondo: #FFFFFF;
color: # 333333;
padding-top: 2px;
la frontera de radio: 3px;
color: # 333333;
}
/ * Esto define el tamaño y la posición del botón de subtítulos. * /
.mejs-controles .sample .mejs Leyendas de botón {
position: relative;
Ancho: 24px;
derecha: 4 píxeles;
top: 0px;
}
/ * Esto define la etiqueta de botón de subtítulos. * /
.mejs-controles .sample botón .mejs Leyendas de botón {
Ancho: 24px;
altura: 24px;
izquierda: 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 Aplicación de una piel para el controlador de audio . Para obtener detalles sobre la aplicación de una piel para el controlador de video, consulte Aplicación de una piel para el controlador de vídeo .
|
Ver también: |
Soporte | Sobre Trivantis
© Derechos de autor Trivantis 2017