Áudio e vídeo em HyperCode

Como inserir mídias de áudio e vídeo nas suas postagens

O HyperCode suporta alguns elementos básicos para incorporar mídias de áudio e de vídeo nas suas postagens. Veja como.

Existem 3 tipos de mídias de áudio e vídeo suportadas diretamente pelo HyperCode e HyperFluxCMS: arquivos de áudio, arquivos de vídeo e vídeos incorporados.

O único tipo de Vídeo Incorporado suportado pela versão atual do HyperCode é vídeos hospedados no YouTube.

Isso NÃO SIGNIFICA que você NÃO PODE usar vídeos de outras fontes, como Tiktok, na sua postagem. Mas para isso, você terá que usar diretamente código HTML de acordo com as instruções de cada plataforma. Para vídeos do Youtube o HyperCode possui uma tag específica que elimina a necessidade de utilizar HTML para a incorporação.

Já para os dois outros tipos, os arquivos de áudio ou vídeo devem ser arquivos válidos, hospedados no próprio site ou acessíveis diretamente pela URL.

Para usar arquivos hospedados no próprio site, os arquivos devem ser previamente enviados para o servidor utilizando as ferramentas oferecidas pelo provedor de hospedagem: FTP, painel Plesk, etc.

Essas ferramentas variam entre cada provedor de hospedagem e não é objetivo deste artigo ensinar a usá-los. Presume-se que o leitor já tenha conhecimento sobre elas ou conte com suporte do provedor de hospedagem para isso.

É recomendável, mas não obrigatório, que esses arquivos estejam em uma pasta chamada /media/ dentro de wwwroot.

Tag [audio]

A tag audio insere um arquivo de áudio na postagem. É normalmente exibido em forma de um quadro com os controles play, pause, etc e uma barra de progresso.

Sintaxe:

caminho-para-arquivo-de-audio é o única propriedade que é obrigatória.

caminho-para-arquivo-de-audio deve conter o caminho para um arquivo de áudio válido. Pode ser:

• um caminho completo, como "https://nome-do-meu-site.com/media/wow.mp3". Nesse caso, pode-se usar um arquivo de áudio do próprio site ou de fonte externa.
• um caminho relativo, se for um arquivo do próprio site, como "/media/wow.mp3"

Os formatos de arquivo suportados são MP3, OGG e WAV.

Para a maioria dos casos, WAV não é recomendado, por ocupar espaço e largura de banda muito maior do que o .mp3 ou .ogg correspondente com pouca diferença perceptível na qualidade.

Alguns navegadores, como algumas versões do Safari, podem não suportar o formato .OGG. Alguns navegadores podem suportar .MID. Na dúvida, o mais recomendado é usar .mp3, que é amplamente suportado por praticamente todos os navegadores modernos.

Propriedade anônima

A propriedade "src" pode ser omitida e o link pode ser informado diretamente após o nome da tag.

Propriedades adicionais

Como a maioria tas Tags HyperCode, audio aceita opcionalmente as propriedades class, style e id. Veja Class, Style, id

Exemplo:

Tag [video]

A tag video insere um arquivo de vídeo na postagem. É normalmente exibido em forma de um quadro com os controles play, pause, etc e uma barra de progresso, além de uma janela de visualização.

Sintaxe:

caminho-para-arquivo-de-video é a única propriedade que é obrigatória.

caminho-para-arquivo-de-video deve conter o caminho para um arquivo de vídeo válido. Pode ser:

• um caminho completo, como "https://nome-do-meu-site.com/media/intro.mp4". Nesse caso, pode-se usar uma imagem do próprio site ou de fonte externa.
• um caminho relativo, se for um arquivo do próprio site, como "/media/sample-video.mp4"

Os formatos de arquivo suportados são MP4, WebM e OGG. Alguns navegadores, como algumas versões do Safari, podem não suportar o formato .OGG.

Propriedade anônima

A propriedade "src" pode ser omitida e o link pode ser informado diretamente após o nome da tag

Propriedades adicionais

width e height indicam, respectivamente a largura e a altura da janela dentro da página onde o vídeo será exibido. Pode ser informado em pixels, pt, % ou qualquer outra unidade de medida válida em HTML.

Se nenhuma das propriedades width e height forem informadas, o vídeo será inserido em seu tamanho original em pixels conforme dados do próprio arquivo.

Se ambas os propriedades width e height forem informadas, o vídeo será inserido no tamanho informado. Se as medidas não seguirem a proporção da imagem original, o vídeo poderá ser exibido distorcido, comprimido ou esticado na vertical ou horizontal, para ocupar exatamente o tamanho informado.

Se apenas uma das propriedades width ou height for informada, o vídeo será inserido com a dimensão informada, sendo a outra calculada automaticamente para que o vídeo seja exibido mantendo a proporção original e sem distorção.

Como a maioria tas Tags HyperCode, video aceita opcionalmente as propriedades class, style e id.
Veja Class, Style, id

Exemplo:

Tag [youtube]

A tag youtube incorpora um vídeo do Youtube na postagem.

Sintaxe:

vid é a única propriedade que é obrigatória.

vid deve conter o Id do vídeo no Youtube. Veja instruções adiante.

Propriedade anônima

A propriedade "vid" pode ser omitida e o Id do vídeo pode ser informado diretamente após o nome da tag

Propriedades adicionais

width e height indicam, respectivamente a largura e a altura da janela dentro da página onde o vídeo será exibido. Pode ser informado em pixels, pt, % ou qualquer outra unidade de medida válida em HTML.

Se nenhuma das propriedades width e height forem informadas, o vídeo será inserido em seu tamanho sugerido pelo Youtube.

Se ambas as propriedades width e height forem informados, o vídeo será inserido no tamanho informado. Se as medidas não seguirem a proporção da imagem original, provavelmente o Youtube exibirá faixas laterais ou superior/inferior para ocupar o espaço designado sem cortar nem distorcer o vídeo.

Se apenas uma das propriedades width ou height for informada, o vídeo será inserida com a dimensão informada, tendo a imagem cortada de forma que não é possível prever aqui.

Obtendo o Id do vídeo.

O VId do vídeo é um código de letras, números e alguns símbolos que identifica o vídeo na plataforma. Normalmente são 11 caracteres.

A maneira mais simples de obtê-lo é observando o link para o vídeo e procurando código que aparece logo depois de /v=. Pode ser que depois do código apareça um símbolo de & com outros parâmetros (como por exemplo, &ab_channel=meucanal). Ignore dali para a frente. Pegue somente o que estiver após o /v= e antes do próximo &.

Se for difícil ou impossível acessar a URL completa do vídeo, outra opção para obter o id do vídeo é clicando em "Compartilhar", depois em "Incorporar" e procurar o ID que estará logo depois do embed e antes do ?.

Exemplo: