Vídeo no WordPress: guia completo para incorporar vídeos e personalizar o player

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br


Se há algo fácil no WordPress, é incorporar vídeos, mas, além de como é simples você também pode personalizar o player de várias maneiras, então vamos ver todas as possibilidades o que temos.

Incorporar vídeo no WordPress com oEmbed

A maneira mais rápida, de longe, de incorporar um vídeo em uma entrada ou página do seu WordPress é copie o URL do vídeo para exibi-lo e cole-o no seu editor.

O WordPress converterá automaticamente o URL no player, adaptando-se ao tipo de vídeo que é (YouTube, Vimeo, vídeo local etc.).

A lista de serviços compatíveis com essa funcionalidade é enorme.

Nos seguintes vídeos você pode ver como é fácil inserir um vídeo dessa maneira, tanto no editor clássico quanto no de blocos.

Como você pode ver, o editor de blocos converte automaticamente o link em um bloco – neste caso – do YouTube. Se o URL fosse de outro serviço, ele também o detecta e o converte automaticamente.

Você apenas precisa copiar anteriormente o URL da página que mostra o vídeo no serviço correspondente (Vimeo, YouTube, DailyMotion, etc.). Em seguida, cole-o no editor como visto nos vídeos acima e é isso.

O código HTML resultante no editor de blocos é o seguinte:

Por outro lado, no editor clássico, se você for para a guia HTML, verá apenas o URL do vídeo ao colá-lo:

https://youtu.be/4h7YtxuYP_8

Claro, nos dois casos O WordPress os mostrará em seu site com o player HTML5 incluído por padrão.

Os blocos "incorporados"

Além desta técnica simples, se você desejar, você também pode usar o editor de blocos para incorporá-los.

Embora seja um processo mais lento e não contribui com nada para simplesmente colar o URL, quase ninguém o usa quando descobre que o editor de blocos converte automaticamente os URLs em blocos incorporados.

No entanto, no vídeo a seguir, mostrarei como isso seria feito de duas maneiras:

  1. Escolhendo o bloco incorporado em questão (no exemplo do YouTube)
  2. Escolhendo o bloco incorporado genérico (com o mesmo resultado)

Você já viu isso nos dois casos, o resultado é o mesmo, e em ambos leva mais tempo do que simplesmente colar o URL.

Shortcode

embed

Outra maneira de incorporar vídeos de um URL externo, usando oEmbed, é usar o shortcode

embed

, que é bastante mal documentado.

Você pode usá-lo manualmente assim:

( embed)https://ayudawp.com/code.mp4(/embed )

Mas é mais fácil usar o editor de mídia do editor clássico, porque no editor de blocos é usado outro sistema, que veremos mais adiante.

É feito como você pode ver neste vídeo …

Nota: Nos códigos de exemplo de código curto, há muitos espaços antes e antes dos colchetes, para que o código curto não seja executado e mostrado apenas como código. Lembre-se de removê-los se houver cópias para usá-los.

Resumindo

Então, como você pode ver, A funcionalidade oEmbed nos permite incorporar vídeos no WordPress de 4 maneiras:

  1. Cole o URL do vídeo diretamente no editor.
  2. Adicionando o bloco incorporado do serviço de URL.
  3. Adicionando o bloco incorporado genérico.
  4. Com o shortcode
    embed

    .

E nos 4 métodos o resultado é o mesmo, então o mais rápido e mais eficiente é usar o primeiro, colar diretamente a URL no editor, que também funciona tão bem no editor de blocos quanto no editor clássico.

Sem opções

A grande desvantagem desse método de inserção de vídeos usando o oEmbed é que você não pode aplicar configurações aos seus vídeos, exceto os estilos aplicados pelo tema ativo ou o mesmo WordPress por padrão.

Mais tarde, veremos que você pode personalizar o player.

Incorpore vídeos no WordPress com o código curto

video

Recurso oEmbed é ótimo por sua velocidademas às vezes não será a melhor opção:

  • Se o vídeo não estiver hospedado em um serviço compatível com o oEmbed.
  • Se você deseja personalizar a reprodução.

Como o oEmbed se baseia na simples colar do URL que você não possui parâmetros a serem aplicados, portanto, nos vídeos incorporados por essa técnica, você não poderá aplicar personalizações, não há opções.

Mas com o shortcode

video

a coisa muda, para melhor e muito.

Shortcode básico do vídeo

A incorporação no WordPress de um vídeo a partir de qualquer URL com um código curto também é simples.

Você apenas precisa usar esta sintaxe:

( video src="url_del_video.mp4" )

Por exemplo, assim:

( video src="https://ayudawp.com/code.mp4" )

Shortcode sem vídeo

Uma curiosidade do código de acesso do vídeo é que você pode nem indicar o URL (src) do vídeo.

Se na entrada ou na página já houver um arquivo de vídeo anexado, basta colocar o código curto, com mais nada, como este:

( video )

O WordPress exibirá o primeiro vídeo anexado à postagem por padrão.

Shortcode com vídeos alternativos

Atualmente, um bom hábito é oferecer vários formatos do mesmo vídeo, para compatibilidade com diferentes navegadores.

Portanto, você pode indicar usando o código de acesso que um formato é exibido e, se o navegador não for compatível com ele, usar outro. Por exemplo:

( video webm="https://ayudawp.com/code.webm" mp4="https://ayudawp.com/code.mp4" )

Nesse caso, o player mostrará o formato webm Se o navegador for compatível, ele mostrará o vídeo no formato mp4.

Os formatos que você pode incluir são: mp4, m4v, webm, ogv, wmv e flv.

Código de acesso curto para o vídeo ser reproduzido automaticamente

Se você deseja que o vídeo seja exibido automaticamente ao carregar a entrada ou página, e o vídeo estiver disponível, você deve adicionar um parâmetro ao código de acesso, como este:

( video src="https://ayudawp.com/code.mp4" autoplay="on" )

As opções de parâmetro

autoplay

são dois:

off

e

on

, mas se você não colocar nada, a configuração padrão é

off

e o vídeo não será reproduzido automaticamente.

Shortcode para exibir uma imagem de pôster

Deseja usar uma imagem de capa do vídeo em vez de mostrar o primeiro quadro do vídeo?

É para isso que serve o parâmetro

poster

, que permite especificar o URL da imagem que você deseja exibir antes de reproduzir o vídeo.

É usado assim:

( video src="https://ayudawp.com/code.mp4" poster="https://ayudawp.com/poster.jpg" )

Obviamente, ajudará a imagem a ter a mesma proporção que o vídeo (4: 3, 16: 9) para torná-la melhor.

Código de acesso para o vídeo ser reproduzido em loop

Caso você queira que o vídeo seja reproduzido em loop infinito (desde que alguém não o pare), você tem o parâmetro

loop

.

Se estiver ativo, quando o vídeo chegar ao final de sua gravação, ele será reproduzido novamente desde o início até o espectador parar o player.

Como a reprodução automática, ele tem dois valores possíveis:

on

e

off

. Por padrão, como você imagina, é

off

, não reproduz em loop.

( video src="https://ayudawp.com/code.mp4" loop="on" )

Código de acesso curto para o vídeo ser reproduzido automaticamente infinitamente

Caso você ainda não tenha adivinhado, é claro, você pode combinar

autoplay

com

loop

e, assim, exibir um vídeo em loop automaticamente ao carregar a página:

( video src="https://ayudawp.com/code.mp4" autoplay="on" loop="on" )

Certamente você pode pensar em uma situação para usar essa combinação.

Shortcode para pré-carregar o vídeo

Sim, você pode aplicar parâmetros de pré-carregamento a vídeos para oferecer uma experiência de carregamento de página mais ideal para seus visitantes!

É simples e você tem três possibilidades de uso:

  • metadata

    – Ao carregar a página, apenas os metadados do vídeo (duração, título etc.) são pré-carregados.

  • auto

    – Ao carregar a página, ela é pré-carregada completamente.

  • none

    – Ao carregar a página, nada é pré-carregado do vídeo. Eles serão carregados somente quando você iniciar o player.

Você deve saber que o parâmetro padrão é

metadata

, portanto, se você não usá-lo, é isso que será pré-carregado. Para meu gosto, seria mais ideal não pré-carregar nada por padrão, se o valor fosse

none

.

O uso seria assim:

( video src="https://ayudawp.com/code.mp4" preload="none" )

Código de acesso para especificar as dimensões do vídeo

Finalmente, ainda existem 2 outros parâmetros que podemos usar no código de acesso do vídeo, neste caso, para forçar alturas e larguras específicas do player.

São os seguintes:

  • height

    – Para forçar a altura do jogador.

  • width

    – Para forçar a largura do jogador.

O mais comum é usar os dois combinados, caso contrário, você pode ver players com tamanhos estranhos e, é claro, não adaptados ao vídeo.

Seria tal que:

( video src="https://ayudawp.com/code.mp4" width="900" height="400" )

Mas, apesar de existir, meu conselho e a melhor coisa que você pode fazer é não usá-los, por vários motivos:

  • Se você não especificar uma largura e altura do vídeo, o WordPress mostrará o player automaticamente adaptado ao tamanho e proporção do vídeo e à largura do contêiner do seu tema ativo, ajustando-se perfeitamente às dimensões do seu conteúdo.
  • Se você especificar uma largura ou altura do vídeo maior que o contêiner de tema ativo, o player provavelmente não se ajustará ao seu conteúdo e você poderá destruir a aparência de suas publicações.
  • Ao especificar uma largura e altura do vídeo, ele não será adaptável a outros dispositivos (responsivos) porque você está forçando algumas dimensões por código. Isso causará sérios problemas de visualização, especialmente em telefones celulares.

Então é melhor você não usar esses parâmetros nos seus vídeos incorporados com shortcode, exceto em situações muito específicas.

Incorporar vídeos no WordPress, enviando o vídeo

Outra maneira de incorporar vídeos em suas postagens da Web do WordPress é fazendo o upload de um vídeo, como faria com uma imagem.

Você só precisa escolher o local do conteúdo no qual deseja inseri-lo e você tem várias possibilidades.

Incorporar vídeos enviados no editor clássico

O primeiro é faça o upload do vídeo, o que você pode fazer de duas maneiras:

  1. Arraste e solte o arquivo de vídeo no conteúdo.
  2. Clique no botão "Adicionar objeto", faça o upload do seu vídeo e clique em "Incorporar media player".

Nos dois casos, o carregador de mídia será aberto e, com os dois métodos, a maneira de fazer isso é clicar em "Incorporar reprodutor de mídia".

Depois de incorporado ao seu conteúdo, você pode modificar alguns parâmetros do vídeo.

No vídeo a seguir, você pode ver como tudo o que estou explicando é feito, além das configurações que você pode personalizar:

O que você já conhece das configurações de fontes alternativas, pré-carregamento, pôster e outros personalizáveis?

De fato, incorporando um vídeo do carregador de mídia WordPress no editor clássico o que você obtém em HTML é o código de acesso que vimos antes, mas aqui você faz tudo visualmente.

O código resultante seria como qualquer um dos exemplos que vimos antes do shortcode

video

, é claro, dependendo do que você personaliza.

A vantagem de usar o shortcode

video

O que expliquei acima é que você também pode personalizar as configurações dos vídeos inseridos em um URL, porque, se esse for o caso, o carregador de mídia não oferece essas opções, pois usa o código de acesso

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br
embed

, que também vimos antes.

Incorporar vídeos enviados no editor de blocos

Além disso, o editor de blocos nos permite Carregue e incorpore vídeos facilmentee, como no clássico, temos várias maneiras de enviá-lo:

  1. Arraste e solte o arquivo de vídeo no conteúdo.
  2. Adicione um bloco de vídeo e faça o upload do arquivo de vídeo a partir dos botões «Upload» ou «Media Library»

Não importa qual método você escolher, uma vez carregado você pode personalizar muitas configurações, nesse caso também o estilo do vídeo.

No vídeo a seguir, você pode ver como isso é feito arrastando e soltando um arquivo …

E neste aqui com o bloco de vídeo …

Além das configurações encontradas no editor clássico ou no código de acesso, no editor de blocos, você também pode decidir se deseja exibir ou não os controles do player ou até integrar a reprodução à página.

Você também pode aplicar estilos de largura ao bloco, tornando-o largo ou total.

Incorporar vídeos de plano de fundo no WordPress

Além de tudo isso, com o editor de blocos você também pode adicionar um tipo especial de bloco chamado bottom, cujo fundo pode ser uma imagem ou um vídeo e no qual você pode adicionar um texto.

Veja no vídeo a seguir suas possibilidades …

Você também pode crie um plano de fundo de vídeo a partir de um bloco de vídeo já incorporado, alterando o tipo de bloco. Neste vídeo, você pode ver como isso é feito:

Incorporar um vídeo em um widget

Outra possibilidade que temos no WordPress é incorporar um vídeo em um widget, para que ele seja exibido nas áreas de widget do nosso site.

Simplesmente temos que inserir um widget de vídeo na área do widget que queremos, a partir do personalizador do WordPress, é tão fácil…

Incorporar uma lista de reprodução de vídeo no WordPress

Além de todas as opções acima, você também pode incorporar, não um vídeo e outro, mas uma lista de vídeos, com um player completo que permite mover de um vídeo para outro.

É legal né?

Bem, pelo menos por enquanto, você só pode fazer isso facilmente no editor clássico.

Simplesmente abra o carregador de mídia do editor, clicando em "Adicionar objeto" e, no menu à esquerda, escolha "Criar lista de reprodução de vídeo".

A seguir selecione os vídeos que incluirão clicando em cada um deles na biblioteca de mídia e clique em "Criar uma nova lista de reprodução de vídeo".

Depois, basta decidir se deseja exibir a lista de vídeos e imagens, reordená-los e terminar clicando em "Inserir lista de reprodução de vídeo"

É melhor vermos em um pequeno vídeo, certo?

Bata no jogador …

E você não pode inserir listas de reprodução no editor de blocos?

Em princípio não … visualmente.

Mas você pode usar o código de acesso do WordPress

playlist

.

Adicione um bloco de código curto e a sintaxe é a seguinte:

( playlist type="video" ids="427,439")

Onde ids são os números únicos dos vídeos que você deseja exibir na lista de reprodução de vídeos.

Para localizar esses IDs, na biblioteca de mídia do WordPress (Desktop> Mídia), clique no vídeo que deseja conhecer o ID e, quando a janela de detalhes da mídia for aberta, no URL, você verá o ID do mesmo.

Por exemplo:

https://ayudawp.com/test/wp-admin/upload.php?item=438

No URL anterior, o ID é 438.

Você verá que não é tão fácil quanto com o editor clássico, mas por que não é usado tantas vezes nas listas de vídeos?

Não existe um truque para tornar mais fácil no editor de blocos?

Vamos, eu vou te dizer. Mas você sabe disso você já deveria ter adivinhado.

Assista ao vídeo a seguir para descobrir o truque:

Pois sim, basta inserir um bloco clássico e, a partir daí, você já pode inserir a lista de reprodução de vídeo.

Como um plus também você pode converter o clássico em um bloco e o editor o converte automaticamente em um código curto da lista de reprodução.

A outra possibilidade é instalar o plugin Player with Playlist Block Lite, que adiciona um bloco adicional, suponha, com o qual você pode incorporar listas de reprodução de vídeo.

Como mudar a aparência do player de vídeo WordPress

Bem, uma vez visto como fazer upload e incorporar vídeos no WordPress, e se virmos como personalizar a aparência do player?

Bem, no editor clássico é muito fácil, basta instalar o plug-in Kit de Estilo do Media Player, ativá-lo e, no personalizador do WordPress, colocar ao seu gosto, assim …

Você verá que você pode mudar as cores de cada um dos elementos e controles do jogador, e eles se aplicam ao reprodutor de vídeo e ao reprodutor de áudio, porque, na realidade, é o mesmo.

Mas como você pode ver na mesma captura de tela acima, as alterações não afetam o player do editor de blocos.

Então, como altero o aspecto do player de vídeo do editor de blocos?

Bem, na verdade, é o player do WordPress, mas o Gutenberg, o mecanismo do editor de blocos, adiciona seu próprio CSS, então você precisa forçar seu próprio CSS, a partir do personalizador.

A melhor opção seria poder adicionar estilos de bloco ao bloco de vídeo usando a API de variações de estilo do Gutenberg, mas atualmente está disponível apenas nos blocos botão, compromisso, parágrafo de compromisso e separador, embora tenha sido solicitado que ele seja adicionado ao outros blocos

No vídeo a seguir, você tem um exemplo do que estou falando:

Enquanto isso, como o media player WordPress é baseado em MediaElement.js, Eu recomendo este guia detalhado do CSSIgniter.

Dúvidas?

Bem, espero que este guia o ajude a incorporar vídeo no WordPress, se você tiver alguma dúvida, não tenha medo de perguntar nos comentários, eu o ajudarei, se possível.

A entrada Vídeo no WordPress: guia completo para incorporar vídeos e personalizar o player foi publicada pela primeira vez por Fernando Tellado na Ajuda do WordPress. Não copie conteúdo, ele não diz nada de bom a você para seus leitores.

Blogs Relacionados:

A Importância da Comunicação Visual no Marketing

Como fazer um excelente plano de negócios

20 ferramentas de dropbox para aumento da produtividade

Como ser feliz? Mude sua vida

2016, O Ano de Essencialismo

3 maneiras baratas (ou gratuitas) de se pesquisar para infecções sexualmente transmissíveis

O 2017 de Lifestyle to the Square: este tem sido nosso ano

 Estratégias de Marketing na Internet – Ganhar dinheiro para outras pessoas

Como se acostumar com uma nova cidade

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br