1. Publisher
2. x64 (também conhecido como andi)

Há algum tempo, mencionei a tag de vídeo, especialmente implementada em html5. no entanto, infelizmente, o uso da tag causará mais transtornos do que benefícios. portanto, falarei sobre o modo como você pode fazer isso completamente com um formato de vídeo.

para um projeto eu precisava encontrar a possibilidade de desparafusar vídeos no site. Não foi possível criar um player do zero em um flash (para começar, eu não tenho um ambiente de desenvolvimento e não o forneci), então, na verdade, era necessário encontrar um candidato adequado diante de um flash player. nada particularmente complicado era necessário, já que graças aos usuários do YouTube é muito fácil de navegar neste tipo de jogadores;)

2 candidatos localizados nos sites flv-mp3.com (um projeto da uppodʻa) e flowplayer . tendo feito uma pequena cutucada em cada um, o primeiro foi rapidamente abandonado em favor da combinação fornecendo a presente API. como o tempo tem mostrado, o intestino interior não me decepcionou (embora algumas pessoas tenham conseguido entrar no vtyuhat flv-mp3.com).

Como você sabe, a primeira impressão é bastante enganosa, e às vezes é dada preferência ao dispositivo menos saturado (especialmente se ele usa o idioma nativo). É essa abordagem que estava em demanda no flv-mp3: o serviço oferece a oportunidade de “montar” um player com características específicas (em formulário indique o arquivo que está sendo reproduzido, o protetor de tela, as dimensões e alguns outros parâmetros) e obtenha o código de saída para inserir o arquivo. Sim, a opção pode parecer muito conveniente, especialmente para pessoas que consideram html uma bruxa forte, para não mencionar js e assim por diante.

apenas a adição periódica de vídeos ao site provavelmente não contribuirá para o entusiasmo de "construir" constantemente o player por si só. Como alternativa, você pode explorar todas as configurações e automatizar o idioma do servidor. mas esse princípio só pode ser chamado de distorcido (é muito mais fácil carregar vídeos no YouTube e obter o código pronto para download).

aqui chegamos ao que já pode ser chamado de feiticeira. Você quer compreender magia javascript? Mostrarei que não é nada difícil (ainda mais fácil do que usar um construtor). e ajuda com este flowplayer. você pode escolher uma versão daqui , mas a primeira versão que é distribuída sob a GPL3 é bastante adequada para o seu site.

O player suporta a reprodução do seguinte conteúdo: flv, mp4, m4v (para imagens - jpg, gif, png). O vídeo é suportado desde a versão 9, portanto, não deve haver problemas de suporte.

Faça o download do arquivo com o player e descompacte-o. Você precisará enviar 3 arquivos para o site: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf e example / flowplayer-NumVer.min.js , onde NumVer é apenas o número da versão e pode ser, por exemplo, 3.2.7 .

O primeiro arquivo contém o painel de controle, o segundo - diretamente o jogador e o terceiro é o link que fornece a API. Os dois primeiros arquivos (* .swf) devem estar na mesma pasta. agora é hora do código mais simples. pode ser:

<div id = "player" style = "largura: 640px; altura: 480px;"> </ div> <script type = "texto / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" texto / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {}); </ script>

O elemento div com o ID do jogador é o contêiner no qual o vídeo será desparafusado. na segunda linha é a conexão do arquivo javascript. Diretamente para a saída é responsável uma função flowplayer () , que passa 3 parâmetros:

1. ID do elemento em que o vídeo deve ser reproduzido;
2. o caminho para o jogador (nomeadamente para o jogador e não para os controlos que serão automaticamente carregados);
3. Alguns parâmetros adicionais.

A propósito, além do identificador, você pode passar diretamente uma referência para um objeto ou seletor.

O código acima não exibe nada, mas dá uma idéia de como é fácil conectar um flowplayer a uma página. Para saída de vídeo, você precisa criar um terceiro parâmetro, e este, por sinal, também é bastante simples.

para simplificar: o terceiro parâmetro (config) é um array associativo no qual os seguintes elementos podem ser descritos:

• clip - usando essa chave, você pode “fazer” configurações globais, por exemplo, se deseja iniciar automaticamente o buffer (auto-buffer) ou reproduzir (autoPlay), como dimensionar o conteúdo (dimensionar com o valor de ajuste manterá a proporção original e, para vídeo normal, talvez só isso). Você também pode especificar o arquivo que está sendo reproduzido (url) e até mesmo suspender eventos (funções que serão chamadas, por exemplo, quando o filme começar a ser reproduzido);
• lista de reprodução é uma matriz regular (lista). cada elemento pode ser uma string (nesse caso, a string é o endereço do clipe que está sendo reproduzido) ou um array associativo. no segundo caso, o conjunto de dados pode ser visualizado como um conjunto de dados semelhante à chave do clipe do item anterior, ou seja, você pode especificar o uso de buffer, iniciar a reprodução e assim por diante;
• plugins - serve para expandir os recursos padrão. Uma das características é a capacidade de russificar a interface imediatamente.

Agora, um pequeno exemplo que inclui uma demonstração das possibilidades:

<div id = "player" style = "largura: 520px; altura: 330px;"> </ div> <script type = "texto / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('reprodutor', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, buffer automático: false, dimensionamento : 'fit'}, lista de reprodução: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', autoBuffering: true, reprodução automática: true}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // para manipular os controles de plugins: {controls: {url:' flowplayer.controls-3.2.16.swf ', playlist: false , // remove os botões de retrocesso stop: true, // adiciona o botão de parada scrubber: true // false desativa a rolagem do vídeo}}}); </ script>

O código apresentado define o seguinte como configurações globais: desabilitando a reprodução de início automático, desabilitando o buffer automático, dimensionando o vídeo para caber na janela. Como um arquivo reproduzível, uma imagem e um vídeo são usados, e as configurações da imagem são substituídas (já que devem ser carregadas automaticamente). quando você clica na foto (ou no botão play), o vídeo é exibido. como você pode ver, tudo é muito simples. Se você quiser adicionar outro videoclipe, basta adicionar um novo item à playlist, separado por uma vírgula. Se a reprodução automática da lista de reprodução for necessária, no clipe da matriz associativa estiver definido, o valor da reprodução automática será definido como verdadeiro.

documentação contendo funções api está localizada aqui . se alguém não entende inglês - não importa, tudo fica bem claro aí. e depois de analisar o código acima, é bem possível entender o que está nas docas. Eu recomendo uma espiada, com certeza haverá um “cenário” que será procurado.

exemplo pode olha aqui . não esqueça de olhar o código fonte (Ctrl + U)

Publisher

off-line 1 semana

x64 (também conhecido como andi)

Comentários: 2842 Publicações: 395 Registros: 02-04-2009