Você pode personalizar o quadro do player de mídia, criando e aplicando suas próprias peles HTML.
A pele é composta de um embalados. Zip arquivo contendo uma. Css arquivo e um sprite. Png arquivo de imagem contendo os gráficos componentes. . O css arquivo define as configurações para os componentes da pele: Barra de controle, exibição, embarcadouro, e lista de reprodução. Use o seu editor de imagem favorito para projetar e salvar os elementos visuais que compõem a pele e link para eles na pele. Css arquivo.
|
|
Capas personalizadas com base em flash usados em Lectora 16,0 e mais velhos não funcionará mais. Use um dos skins disponíveis emLectora ou converter, reconstruir ou criar a sua pele personalizado desejado. |
Para criar uma capa personalizada usando o novo formato:
Criar um sprite. Png arquivo de imagem contendo todas as imagens para a pele. Nome o sprite. Png imagem arquivar o mesmo que o nome da sua pele personalizado. Vários criadores imagem do sprite estão disponíveis na Web. Tendo em botões que são a mesma largura e altura é recomendado. Além disso, as imagens devem ser da mesma altura que você deseja para a altura do controlador.
Observe a posição X e Y de cada uma das imagens no arquivo de imagem do sprite. Essas coordenadas são necessárias quando você cria o. Css arquivo na etapa 3.
Por exemplo, aqui estão as posições e as dimensões X e Y para a imagem do sprite exemplo mostrado no Passo 1:
| pele imagem | X, posição Y | Largura | Altura |
| Imagem de fundo | 0, 0 | 80 | 24 |
| botão Play | 0, 24 | 20 | 24 |
| Jogar botão em foco | 20, 24 | 20 | 24 |
| botão de pausa | 40, 24 | 20 | 24 |
| botão em foco pausan | 60, 24 | 20 | 24 |
| botão Fullscreen | 0, 48 | 20 | 24 |
| botão em foco Fullscreen | 20, 48 | 20 | 24 |
| botão Unfullscreen | 40, 48 | 20 | 24 |
| botão em foco Unfullscreen | 60, 48 | 20 | 24 |
| botão de mudo | 0, 72 | 20 | 24 |
| botão de mudo | 20, 72 | 20 | 24 |
| botão unmute | 40, 72 | 20 | 24 |
| botão em foco Unmute | 60, 72 | 20 | 24 |
| botão de legendas | 0, 96 | 24 | 24 |
| TimeHandle | 24, 96 | 6 | 16 |
Criar a. Css arquivo para a pele, guiada pelo arquivo CSS exemplo fornecido abaixo. Nomeie o. Css arquivo o mesmo que a pele é chamado dentro do arquivo.
Dependendo do nome da sua pele, substitua amostra em conformidade.
Por exemplo: amostra é para ser substituído com. YourSkinName e sample.png é para ser substituído com yourSkinName.png .
amostra:
div[id^="video"] .sample .mejs-controls {
background: url(Sprites/sample.png) 0px 0px;
height: 24px;
bottom: -24px;
}Sua pele:
div[id^="video"] .yourSkinName .mejs-controls {
background: url(Sprites/yourSkinName.png) 0px 0px;
height: 24px;
bottom: -24px;
}
Cada uma das imagens que compõem a pele requer a sua respectiva classe de CSS. Para o fundo, usar mejs-controles que apontam para a imagem de fundo dentro da Sprite. isso é feito com fundo url (Sprites / sample.png) 0px 0px onde 0px 0px representa a posição X e Y dentro da imagem do sprite. Use as classes de áudio e vídeo em conformidade como mostrado na amostra. Css abaixo.
Modificar a altura de acordo com a sua imagem. Se você gostaria que a barra de controle para ser abaixo do vídeo, altere a propriedade de fundo em conformidade.
Substitua os outros controles com a respectiva imagem e tamanhos.
Por exemplo:
.sample .mejs-controls .mejs-pause button {
width: 20px;
height: 24px;
background: url(Sprites/sample.png) no-repeat -40px -24px;
margin: 0;
padding: 0;
}
Note que a posição X e Y são negativos para mostrar a posição de deslocamento CSS apropriado.
Para o trilho tempo e controle deslizante de volume, mudar a cor do fundo ao seu gosto. Use valores RGBA para exibir com uma transparência alfa, e usar um valor hexadecimal, assim como para apoiar os navegadores mais antigos.
Uma vez que os arquivos de imagem .css e Sprite são completos, zip-los juntos. A. Zip nome deve corresponder ao seu. Css nome do arquivo.
Exemplo de arquivo CSS
/*Certifique-se de que este corresponde ao nome do seu arquivo CSS. Por exemplo, se seu arquivo CSS é chamado sample.css, certifique-se esta classe é chamada .mejs-container.sample */
.mejs-container.sample {
}
/*Este é o recipiente para todos os elementos do controlador. */
.sample .mejs-controls {
position:absolute;
bottom:0;
width:100%;
}
/*Estes 2 blocos ID definir a imagem de fundo para o controlador de vídeo / áudio para 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;
}
/*Estes 2 blocos ID definir a imagem de fundo para o controlador de vídeo / áudio para 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;
}
/*Este define a posição eo tamanho do tempo-controle deslizante da esquerda e superior. O tempo-slider é a barra que mostra o progresso do arquivo de mídia.*/
.sample .mejs-time-slider{
left:20px;
top:4px;
height:8px;
display: inline-block;
}
/*Isto define a posição do tempo-deslizante em relação à largura do controlador.*/
.sample .mejs-time{
top:0px;
left: 0px;
position:relative;
}
/*Este é o recipiente código de tempo.*/
.sample .mejs-controls .mejs-time {
background:url(Sprites/sample.png) repeat-x 0 0;
height:17px;
position: relative;
top: 0px;
}
/*Esta é a barra de progresso de mídia.*/
.sample .mejs-controls .mejs-time-rail {
background:url(Sprites/sample.png) repeat-x 0 0;
height:22px;
}
/*Este define a cor, ou a cor e alfa dependendo do navegador e altura da barra de tempo total-slider.*/
.sample .mejs-controls .mejs-time-rail .mejs-time-total {
background: #383838;
background: rgba(0,0,0,0.6);
height: 8px;
}
/*Este define a altura da barra de buffer time-slider.*/
.sample .mejs-controls .mejs-time-rail .mejs-time-buffering {
height: 8px;
}
/*Este define a cor, ou a cor e alfa dependendo do navegador, e a altura da barra de tempo-slider carregado.*/
.sample .mejs-controls .mejs-time-rail .mejs-time-loaded {
background: #808080;
background: rgba(128,128,128,0.3);
width: 0;
height: 8px;
}
/*Este define a cor, ou a cor e alfa dependendo do navegador, e a altura da barra de tempo-slider atual.*/
.sample .mejs-controls .mejs-time-rail .mejs-time-current {
background: #335D7C;
background: rgba(51,93,124,0.8);
width: 0;
height: 8px;
}
/*Este define a aparência ea posição do tempo-handle do 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;
}
/*Este descreveria o tempo-float, mas esta pele não usar um.*/
.sample .mejs-controls .mejs-time-rail .mejs-time-float {
display: none;
}
/*Este define o tamanho ea posição dos botões de play / pause.*/
.sample .mejs-controls .mejs-playpause-button {
top: 0px;
left: 0px;
width: 20px;
height: 24px;
}
/*Este define a tag botão play.*/
.sample .mejs-controls .mejs-playpause-button button {
width: 20px;
height: 24px;
background: url(Sprites/sample.png) no-repeat 0 -24px;
margin: 0;
padding: 0;
}
/*Este define a tag botão de pausa.*/
.sample .mejs-controls .mejs-pause button {
width: 20px;
height: 24px;
background: url(Sprites/sample.png) no-repeat -40px -24px;
margin: 0;
padding: 0;
}
/*Este define o estado de foco botão play. */
.sample .mejs-controls .mejs-playpause-button button:hover {
background: url(Sprites/sample.png) no-repeat -20px -24px;
}
/*Este define o estado de foco botão de pausa*/
.sample .mejs-controls .mejs-pause button:hover {
background: url(Sprites/sample.png) no-repeat -60px -24px;
}
/*Este define o tamanho ea posição dos botões / unfullscreen tela cheia.*/
.sample .mejs-controls .mejs-fullscreen-button {
top: 0px;
right: 12px;
width: 20px;
height: 44px;
background : none;
}
/*Este define o botão de tela cheia.*/
.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;
}
/*Este define a tag botão unfullscreen.*/
.sample .mejs-controls .mejs-unfullscreen button {
background: transparent url(Sprites/sample.png) no-repeat -40px -48px;
margin: 0;
padding: 0;
}
/*Este define o estado de botão em foco maior.*/
.sample .mejs-controls .mejs-fullscreen-button button:hover {
background: transparent url(Sprites/sample.png) no-repeat -20px -48px;
}
/*Este define o estado de botão em foco unfullscreen.*/
.sample .mejs-controls .mejs-unfullscreen button:hover{
background: transparent url(Sprites/sample.png) no-repeat -60px -48px;
}
/*Este define o tamanho ea posição dos botões de áudio / sem áudio.*/
.sample .mejs-controls .mejs-volume-button {
top: 0px;
right: 0px;
width: 20px;
height: 24px;
}
/*Este define a tag botão mudo.*/
.sample .mejs-controls .mejs-mute button {
background: url(Sprites/sample.png) no-repeat 0 -72px;
width: 20px;
height: 24px;
margin: 0;
padding: 0;
}
/*Este define a tag botão unmute.*/
.sample .mejs-controls .mejs-unmute button {
background: url(Sprites/sample.png) no-repeat -40px -72px;
width: 20px;
height: 24px;
margin: 0;
padding: 0;
}
/*Este define o estado de botão em foco muda.*/
.sample .mejs-controls .mejs-mute button:hover {
background: url(Sprites/sample.png) no-repeat -20px -72px;
}
/*Este define o estado de botão em foco unmute.*/
.sample .mejs-controls .mejs-unmute button:hover {
background: url(Sprites/sample.png) no-repeat -60px -72px;
}
/*Essas propriedades definem a aparência e tamanho do fundo exterior do pop-up controle deslizante de volume vertical.*/
.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;
}
/*Essas propriedades definem o fundo interior do controle deslizante de volume.*/
.sample .mejs-controls .mejs-volume-button .mejs-volume-total {
background: #333333;
background: rgba(0,0,0,0.8);
left: 7px;
width: 6px;
height: 50px;
}
/*Essas propriedades definem a aparência do valor controle deslizante de volume.*/
.sample .mejs-controls .mejs-volume-button .mejs-volume-current {
left: 7px;
width: 6px;
background: #335D7C;
background: rgba(51,93,124,0.8);
height: 50px;
}
/*Esta propriedade seria definir um controle deslizante de volume. Esta pele não usar um.*/
.sample .mejs-controls .mejs-volume-button .mejs-volume-handle {
display: none;
}
/*Este define a cor do texto do código de tempo.*/
.sample .mejs-controls .mejs-time span {
color: #000000;
}
/*Este é o recipiente que envolve o código de tempo atual.*/
.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;
}
/*Este é o recipiente que envolve o código de tempo comprimento.*/
.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;
}
/*Este define o tamanho ea posição do botão legendas.*/
.sample .mejs-controls .mejs-captions-button {
position:relative;
width:24px;
right:4px;
top:0px;
}
/*Este define a tag botão de legendas.*/
.sample .mejs-controls .mejs-captions-button button {
width:24px;
height:24px;
left:-1px;
top:0px;
background: url(Sprites/sample.png) no-repeat 0 -96px;
}
|
É possível importar peles e adicioná-las à lista de peles que podem ser aplicados para os controladores de áudio e vídeo. Para obter detalhes sobre a aplicação de uma pele para o controlador de áudio, consulte Aplicar uma pele para o controlador de áudio . Para obter detalhes sobre a aplicação de uma pele para o controlador de vídeo, consulte Aplicar uma pele para o controlador de vídeo .
|
See also: |
© de Copyright Trivantis 2019