Você pode personalizar o quadro do player de mídia, criando e aplicando suas próprias peles.
A pele é composta de um embalados. zip arquivo contendo uma. css arquivo e um sprite. png arquivo de imagem contendo os gráficos do componente. O . css arquivo define as configurações para componentes da pele: Barra de controle, visualizaçã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 de. css arquivo.
|
|
skins personalizadas com base em flash usados em |
O programa utiliza o formato de capa personalizada da JW Jogador 5, o principal player de mídia na Internet hoje. O jogador é fácil de configurar, personalizar e estender. Para obter detalhes sobre a criação de skins para o JW Jogador 5, visite http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/14/building-skins .
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 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.
|
|
Imagens Sprite não deve exceder uma altura de 24px. Contato Suporte se você precisar de imagens de sprite maiores superiores 24px. |
Observe a posição X e Y de cada uma das imagens no arquivo de imagem do sprite. Essas coordenadas são necessárias ao criar 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, Y posição | 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 pausa | 60, 24 | 20 | 24 |
| botão de tela cheia | 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 em foco Mute | 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 sampleconformidade.
Por exemplo:
sampledeve ser substituído por. yourSkinName
e sample.pngdeve ser substituído por yourSkinName.png .
amostra :
div [id ^ = "video"] .sample .mejs-controles {
background: url (Sprites / sample.png) 0px 0px;
altura: 24 pixels;
inferior: -24px;
}
Sua pele :
div [id ^ = "video"] .yourSkinName .mejs-controles {
background: url (Sprites / yourSkinName.png) 0px 0px;
altura: 24 pixels;
inferior: -24px;
}
Cada uma das imagens que compõe a pele requer sua respectiva classe CSS. Para o fundo, usar mejs-controles que apontam para a imagem de fundo dentro da Sprite. isto é feito com o fundo url(Sprites/sample.png) 0px 0px
, onde 0px 0pxrepresenta a posição X e Y dentro da imagem do sprite. Use as classes, tanto para á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 sua respectiva imagem e tamanhos.
Por exemplo:
.mejs-Controls .sample botão .mejs-pause {
largura: 20 p;
altura: 24 pixels;
background: url (Sprites / sample.png) -40px -24px no-repeat;
margem de: 0;
padding: 0;
}
Note que a posição X e Y são negativos para mostrar a posição compensada CSS apropriado.
Para o trilho tempo e controle deslizante de volume, mudar a cor de fundo ao seu gosto. Use valores RGBA para exibir com uma transparência alfa, e use 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. O . zip nome deve corresponder ao seu. css nome do arquivo.
Amostra 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 é chamado .mejs-container.sample * /
.mejs-container.sample {
}
/ * Este é o recipiente para todos os elementos do controlador. * /
.mejs-controles .sample {
posição: absoluto;
inferior: 0;
largura: 100%;
}
/ * Estes 2 blocos ID definir a imagem de fundo para o controlador de vídeo / áudio * /
div [id ^ = "video"] .sample .mejs-controles {
background: url (Sprites / sample.png) 0px 0px;
altura: 24 pixels;
inferior: -24px;
}
div [id ^ = "áudio"] .sample .mejs-controles {
background: url (Sprites / sample.png) 0px 0px;
altura: 24 pixels;
inferior: 0;
}
/ * Estes 2 blocos ID definir a imagem de fundo para o controlador de vídeo / áudio * /
div [id ^ = "vid"] .sample .mejs-controles {
background: url (Sprites / sample.png) 0px 0px;
altura: 24 pixels;
inferior: -24px;
}
div [id ^ = "sndtobj"] .sample .mejs-controles {
background: url (Sprites / sample.png) 0px 0px;
altura: 24 pixels;
inferior: 0;
}
/ * Isto define a posição e tamanho do tempo-deslizante a partir da esquerda e de topo. O tempo-slider é a barra que mostra o progresso do arquivo de mídia. * /
.mejs-tempo-slider .sample {
left: 20px;
superior: 4px;
altura: 8px;
display: inline-bloco;
}
/ * Isto define a posição do tempo-deslizante em relação à largura do controlador. * /
.mejs-tempo .sample {
superior: 0px;
left: 0px;
posição: relativa;
}
/ * Este é o recipiente código de tempo. * /
.sample .mejs-Controls .mejs-tempo {
background: url (Sprites / sample.png) repetir-x 0 0;
altura: 17px;
posição: relativa;
superior: 0px;
}
/ * Esta é a barra de progresso de mídia. * /
.sample .mejs-Controls .mejs-time-ferroviário {
background: url (Sprites / sample.png) repetir-x 0 0;
altura: 22px;
}
/ * Este define a cor ou cor e alfa dependendo do navegador, e altura da barra de tempo total-slider. * /
.sample .mejs-controles .mejs-time-rail .mejs-time-total de {
background: # 383838;
fundo: rgba (0,0,0,0.6);
altura: 8px;
}
/ * Este define a altura da barra de buffer time-slider. * /
.sample .mejs-Controls .mejs-time-rail .mejs-time-buffering {
altura: 8px;
}
/ * Isto define a cor, ou cor e alfa dependendo do navegador, e a altura da barra de tempo-deslizante carregado. * /
.sample .mejs-Controla .mejs-tempo-carregados .mejs-tempo sobre carris {
background: # 808080;
fundo: rgba (128,128,128,0.3);
largura: 0;
altura: 8px;
}
/ * Este define a cor ou cor e alfa dependendo do navegador, e a altura da barra de tempo-slider atual. * /
.sample .mejs-Controls .mejs-time-rail .mejs em tempo-corrente {
background: # 335D7C;
fundo: rgba (51,93,124,0.8);
largura: 0;
altura: 8px;
}
/ * Este define a aparência ea posição do tempo-handle do tempo-slider. * /
.sample .mejs-Controls .mejs-time-rail .mejs-time-handle {
display: block;
fronteira: nenhuma;
margem de: 0;
largura: 6px;
esquerda: -3px;
altura: 16 pixels;
superior: -5px;
background: url (Sprites / sample.png) -24px -96px no-repeat;
}
/ * 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 botão {
superior: 0px;
left: 0px;
largura: 20 p;
altura: 24 pixels;
}
/ * Este define a tag botão play. * /
.mejs-Controls .sample button-PlayPause botão .mejs {
largura: 20 p;
altura: 24 pixels;
background: url (Sprites / sample.png) no-repeat 0 -24px;
margem de: 0;
padding: 0;
}
/ * Este define a tag botão de pausa. * /
.mejs-Controls .sample botão .mejs-pause {
largura: 20 p;
altura: 24 pixels;
background: url (Sprites / sample.png) -40px -24px no-repeat;
margem de: 0;
padding: 0;
}
/ * Este define o estado de foco botão play * /
.sample .mejs-controles botão .mejs-button-PlayPause: hover {
background: url (Sprites / sample.png) -20px -24px no-repeat;
}
/ * Este define o estado de foco botão de pausa * /
.sample .mejs-controles botão .mejs-pause: hover {
background: url (Sprites / sample.png) -60px -24px no-repeat;
}
/ * Este define o tamanho e a posição dos botões / unfullscreen maior. * /
.sample .mejs-controles .mejs-fullscreen-botão {
superior: 0px;
direita: 12px;
largura: 20 p;
altura: 44px;
background: none;
}
/ * Este define o botão de tela cheia. * /
.sample .mejs-controles botão .mejs-fullscreen-botão {
largura: 20 p;
altura: 24 pixels;
background: url transparente (Sprites / sample.png) no-repeat 0 -48px;
margem de: 0;
padding: 0;
}
/ * Este define a tag botão unfullscreen. * /
.sample botão .mejs-Controls .mejs-unfullscreen {
background: url transparente (Sprites / sample.png) -40px -48px no-repeat;
margem de: 0;
padding: 0;
}
/ * Este define o estado botão em foco fullscreen. * /
.sample .mejs-controles botão .mejs-fullscreen botão: hover {
background: url transparente (Sprites / sample.png) -20px -48px no-repeat;
}
/ * Este define o estado botão em foco unfullscreen. * /
.sample .mejs-controles .mejs-unfullscreen botão: hover {
background: url transparente (Sprites / sample.png) -60px -48px no-repeat;
}
/ * Este define o tamanho e a posição dos botões de áudio / sem áudio. * /
.sample .mejs-Controls .mejs-volume-botão {
superior: 0px;
direito: 0px;
largura: 20 p;
altura: 24 pixels;
}
/ * Este define a tag botão mudo. * /
.sample botão .mejs-Controls .mejs-mudo {
background: url (Sprites / sample.png) no-repeat 0 -72px;
largura: 20 p;
altura: 24 pixels;
margem de: 0;
padding: 0;
}
/ * Este define a tag botão unmute. * /
.sample botão .mejs-Controls .mejs-unmute {
background: url (Sprites / sample.png) -40px -72px no-repeat;
largura: 20 p;
altura: 24 pixels;
margem de: 0;
padding: 0;
}
/ * Este define o estado botão em foco muda. * /
.sample .mejs-controles .mejs-mudo botão: hover {
background: url (Sprites / sample.png) -20px -72px no-repeat;
}
/ * Este define o estado botão em foco unmute. * /
.sample .mejs-controles .mejs-unmute botão: hover {
background: url (Sprites / sample.png) -60px -72px no-repeat;
}
/ * Estas propriedades definem a aparência e tamanho do fundo exterior do pop-up controle deslizante de volume vertical. * /
.sample .mejs-controles de volume-botão .mejs .mejs-volume-deslizante {
background: # C0C1E0;
fronteira: #FFFFFF 1 px sólido;
fronteira de largura: 1 px 1px 0 1 px;
largura: 20 p;
altura: 65px;
superior: -65px;
left: 0px;
}
/ * Estas propriedades definem o fundo interior do cursor de volume. * /
.sample .mejs-controles .mejs-volume-botão .mejs-volume-total de {
background: # 333333;
fundo: rgba (0,0,0,0.8);
esquerda: 7px;
largura: 6px;
altura: 50 pixels;
}
/ * Estas propriedades definem o visual da quantidade controle deslizante de volume. * /
.sample .mejs-controles de volume-botão .mejs .mejs-volume-corrente {
esquerda: 7px;
largura: 6px;
background: # 335D7C;
fundo: rgba (51,93,124,0.8);
altura: 50 pixels;
}
/ * Esta propriedade seria definir um controle deslizante de volume. Esta pele não usar um. * /
.sample .mejs-controles de volume-botão .mejs .mejs-volume-handle {
display: none;
}
/ * Isto define a cor do texto do código de tempo. * /
.mejs-Controls .sample período .mejs em tempo {
color: # 000000;
}
/ * Este é o recipiente que envolve o código de tempo atual. * /
.sample .mejs-controles .mejs-HoraAtual-recipiente {
posição: absoluto;
superior: 32px;
direita: 100px;
border: 1px solid # 999999;
background: # 333333;
Cor: #FFFFFF;
padding-top: 2px;
fronteira de raio: 3px;
}
/ * Este é o contentor que envolve o código de tempo de comprimento. * /
.sample .mejs-Controla-.mejs duração recipiente {-
posição: absoluto;
superior: 32px;
direita: 65px;
border: 1px solid # 999999;
background: # FFFFFF;
color: # 333333;
padding-top: 2px;
fronteira de raio: 3px;
color: # 333333;
}
/ * Este define o tamanho ea posição do botão legendas. * /
.mejs-controles .sample .mejs-captions botão {
posição: relativa;
largura: 24 pixels;
direita: 4px;
superior: 0px;
}
/ * Este define a tag botão legendas. * /
botão .mejs-captions botão .mejs-controles .sample {
largura: 24 pixels;
altura: 24 pixels;
esquerda: -1px;
superior: 0px;
background: url (Sprites / sample.png) no-repeat 0 -96px;
}
|
Você pode importar peles e adicioná-los à lista de peles que podem ser aplicadas 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 .
|
Veja também: |
Suporte | Sobre Trivantis
© de Copyright Trivantis 2017