Como alojar e incorporar uma transmissão em direto HLS no seu Web site

À medida que as normas da indústria para a reprodução de vídeo continuam a evoluir, o mesmo acontece com a tecnologia de transmissão em direto. Novas funcionalidades, como o streaming HLS, levam a experiência dos espectadores ainda mais longe, proporcionando-lhes uma qualidade de visualização suave e consistente, independentemente da sua localização em relação ao local de emissão!

Com a morte dos leitores Flash e o aumento do vídeo HTML5 em HTML5, assistimos ao desenvolvimento de novos protocolos de streaming incluindo HTTP Live Streaming (HLS). Esta melhoria melhorou a experiência de visualização em linha para milhões de pessoas que vêem vídeos frequentemente.

Nesta publicação, vamos discutir tudo o que precisa de saber sobre a incorporação de fluxos HLS. Vamos começaremos revisando os conceitos básicos do player de vídeo incorporado tecnologia antes de mergulhar no protocolo de transmissão HLS e na tecnologia relacionada. Então, vamos discutir como incorporar um fluxo HLS.

Para terminar, vamos estabelecer a ligação entre o HLS e o M3U8 e fornecer informações adicionais sobre como os dois funcionam em conjunto.

Índice

• Incorporação de reprodutor de vídeo: O que precisa de saber
• O que é um leitor de vídeo HTML5?
• O que é HLS?
• Transmissão em fluxo HLS e ingestão de RTMP: A configuração ideal de streaming
• Como incorporar um fluxo HLS
• Como incorporar vários reprodutores de vídeo numa página
• Alojamento de vídeo gratuito vs. alojamento de vídeo pago
• A ligação entre HLS e M3U8
• Alternativa HLS: MPEG-DASH
• Comece a alojar transmissões em direto HLS no seu site

Incorporação de reprodutor de vídeo: O que precisa de saber

Um leitor de vídeo é um software de distribuição de multimédia virado para o utilizador programa que permite aos espectadores aceder a conteúdos de vídeo digital. Para incorporar um leitor de vídeo é adicionar o software a a página virada para o utilizador, quer seja numa aplicação, num sítio Web ou num e-mail. A incorporação requer a alteração do código do correio eletrónico ou da página Web para incorporar o código do leitor de vídeo.

Em termos simplesquando vê um vídeo no seu computador no Youtube, o ecrã retangular A secção do ecrã onde se vê o conteúdo é o leitor de vídeo. O navegador maior espaço à volta do leitor de vídeo é a página web na qual o leitor foi incorporado.

Aprender a incorporar um leitor de vídeo numa página Web pode parecer complexo se não tiver conhecimentos técnicos. Mas um leitor de vídeo–pode torná-lo rápido e fácil.

Um vídeo de terceiros–de terceiros irá armazenar os ficheiros de vídeo, fornecer o conteúdo e ajudá-lo a personalizar o leitor para que possa incorporá-lo no seu site e começar a transmitir hoje mesmo.

Porquê incorporar um leitor de vídeo?

Muitas empresas de radiodifusão profissionais optam por incorporar um leitor de vídeo no seu próprio sítio em vez de enviar os espectadores para um sítio como o YouTube. Há muitas razões, incluindo um melhor controlo da marca e da estética.

Com uma solução de streaming de marca branca Se o seu logótipo for de um terceiro, pode substituí-lo pelo seu. Também pode eliminar outros elementos de distração, como “Vídeos sugeridos” de outros criadores e emissoras. Isto permite-lhe elevar os seus próprios vídeos, dando-lhes um aspeto mais profissional.

Quando aprender a incorporar o seu leitor de vídeo, pode selecionar as suas páginas e leitores de vídeo para refletir a sua marca e gerar as conversões pretendidas. Isto pode incluir a adição de logótipos ou outros elementos de design que reflictam a sua marca. Algo tão simples como um esquema de cores ou a escolha de um tipo de letra pode ter um grande impacto na marca.

As soluções de incorporação de vídeo de terceiros também tendem a vir com as suas próprias ferramentas de branding, marketing e análise. Isto pode ser muito limitativo e, por vezes, até contraproducente para os seus objectivos de marketing.

Os leitores incorporados de marca branca ou sem marca dão-lhe a maior liberdade para recolher e interpretar os seus dados de marketing de uma forma que o beneficie mais a si e à sua empresa.

O que é um leitor de vídeo HTML5?

O leitor de vídeo HTML5 é o leitor de vídeo mais popular para a transmissão de vídeo online. É conhecido pela sua ampla compatibilidade. Os leitores de vídeo HTML5 são os a opção mais opção mais amplamente suportada na transmissão em linha.

Como mencionámos, o Flash Player está morto. Embora tenha servido um objetivo importante durante muito tempo, este leitor de vídeo não era compatível com o streaming móvel. O rápido crescimento da popularidade dos iPhones e de outros smartphones criou a necessidade de um leitor de vídeo que fosse compatível com estes dispositivos. O leitor de vídeo HTML5 foi criado para satisfazer essa procura.

Os leitores de vídeo HTML5 são muito atractivos para os organismos de radiodifusão porque a sua compatibilidade universal permite-lhes atingir o maior público possível. Não há não há preocupação em deixar de fora os espectadores que utilizam dispositivos específicos e querem aceder a conteúdos de vídeo HTML5.

O leitor de vídeo HTML5 é fácil de personalizar e incorporar em sítios Web e aplicações. Isto torna-o valioso para as empresas que pretendem marcar o seu conteúdo de vídeo.

Embora o HTML5 tenha crescido em popularidade ao longo da última década, tornou-se oficialmente o único leitor de vídeo amplamente suportado quando o Chrome e outros navegadores Web eliminaram definitivamente o Flash player.

Os leitores de vídeo HTML5 são compatíveis com todos os principais browsers, incluindo o Internet Explorer, Firefox, Safari e Chrome. Também funcionam em dispositivos móveis, incluindo iPhones, iPads, telemóveis e tablets Android.

Da mesma forma, o leitor de vídeo HTML5 é compatível com todos os principais sistemas operativos, incluindo Windows, Mac e Linux. Também é compatível com todos os principais formatos de vídeo, incluindo MP4, WebM e Ogg.

O que é HLS?

O protocolo protocolo HTTP Live Streaming (HLS) foi desenvolvido pela Apple em 2009 para fornecer conteúdos de vídeo a leitores de vídeo HTML5. Este protocolo substituiu o RTMP para entrega, a norma para o streaming para o Flash player.

Um dos principais problemas da utilização do Flash num dispositivo móvel é que os dispositivos móveis tendem a deslocar-se. O Flash foi concebido para funcionar com uma ligação constante à Internet. Os dispositivos móveis requerem muito mais flexibilidade do que um PC com uma ligação por cabo à Internet.

O HLS é um protocolo de streaming com taxa de bits adaptável. Isto significa que permite transmissão de vídeo com capacidade de resposta e pode ajustar automaticamente a qualidade de um vídeo com base na velocidade da Internet do utilizador. Isto é revolucionário porque melhora a experiência do utilizador, uma vez que o streaming HLS adaptativo foi concebido para reduzir o armazenamento em buffer e o atraso.

O HLS pode ser usado tanto para ingestão quanto para entrega. No entanto, há não há muitos codificadores HLS no mercadopor isso HLS ingestão não é ainda amplamente adoptada.

Streaming HLS e ingestão de RTMP: A configuração ideal de streaming

Embora o Flash seja uma coisa do passado, o Protocolo de Mensagens em Tempo Real (RTMP) ainda está vivo e de boa saúde. Desempenha um papel muito importante no processo de transmissão HLS. A ingestão RTMP é atualmente utilizado como protocolo de ingestão de vídeo por defeito, o que significa que que é responsável pelo transporte de vídeos para o alojamento de vídeo ou rede de distribuição de conteúdos (CDN).

A combinação de streaming HLS e entrega RTMP é atualmente a melhor configuração de streaming. O protocolo HLS dá às empresas de radiodifusão acesso ao amplamente adaptável codificador HTML5 enquanto o RTMP permite o acesso a fluxos de baixa latência de baixa latência codificadores económicos e muito mais. Este duo é também o mais seguro mais seguro.

Embora a configuração de alojamento configuração de alojamento RTMP seja atualmente o método preferido, não não há como dizer por quanto tempo isso vai continuar. Os protocolos de transmissão de vídeo em direto estão em constante evolução e a um ritmo acelerado.

Como incorporar um fluxo HLS

Incorporar um fluxo HLS no seu sítio Web não é também difícil. Este processo é bastante simples com as leitor de vídeo em linha (OVP) e editor de sítios Web.

Para efeitos deste tutorial, partimos do princípio de que já produziu conteúdo de vídeo e tem um sítio Web construído.

Vejamos os 5 passos que as empresas de radiodifusão devem seguir para incorporar um fluxo HLS nos seus sítios Web.

1. Escolha uma plataforma de vídeo em linha (OVP)

Para incorporar um fluxo HLS, terá de investir numa plataforma de vídeo online que suporte software HLS. Também precisa de oferecer um leitor de vídeo incorporável.

As empresas e outras organizações profissionais devem investir numa solução paga em vez de dependerem de plataformas gratuitas como o YouTube e o DailyMotion. Já discutimos algumas razões, como a possibilidade de adicionar a sua marca e evitar distrair os espectadores com o conteúdo de outros criadores.

Sem entrar em demasiados pormenores, alguns aspectos a ter em conta ao escolher a sua plataforma de vídeo em linha incluem o seguinte:

• Suporte de monetização: Ao contrário do Dacast (que suporta vídeo por subscrição a pedidoou SVOD), vídeo a pedido baseado em publicidade (AVOD), e transacional vídeo a pedido (TVOD), algumas plataformas não suportam a monetização ou suportam apenas uma ou duas opções. Há muitas formas de rentabilizar os conteúdos e a janela de oportunidade está a crescer. Não deixe que plataformas restritivas o privem de ganhos monetários potencialmente lucrativos para o seu conteúdo.
• Relações CDN: Se quiser garantir que o seu conteúdo é sempre entregue com a melhor qualidade possível em todas as partes do mundo, saiba como as CDN desempenham um papel importante na entrega fiável de conteúdos. Estas redes podem armazenar em cache grandes secções de fluxos de conteúdos de vídeo em vários locais de servidores. Isto permite que o conteúdo seja distribuído aos utilizadores de forma óptima e eficiente sempre que estes o solicitem.
• Funcionalidades de proteção de vídeo: Atualmente, é demasiado comum que os vídeos sejam roubados e distribuídos sem a devida proteção. consentimento. Procure características como DRM, marca de água, controlo de domínio, restrições geográficase segurança geral da plataforma.
• Apoio ao cliente: Algumas plataformas oferecem um apoio mínimo nos planos mais baratos, enquanto outras oferecem um apoio de alto nível em todos os planos. Ironicamente, muitas marcas de topo apenas oferecem um serviço de apoio ao cliente de fraca qualidade. Esta situação deve-se normalmente ao facto de a sua base de clientes ter ultrapassado os seus recursos de apoio ao cliente. Ou simplesmente podem (infelizmente) dar-se ao luxo de perder alguns clientes insatisfeitos aqui e ali.
• Avaliações online: Pesquise opiniões online em sítios como o G2 e o Capterra sobre diferentes plataformas. Certifique-se de que procura críticas fiáveis de empresas bem estabelecidas. Há muitas empresas jovens que, infelizmente, recorrem a críticas falsas para promover o seu produto. Desconfie de novas empresas com críticas aparentemente perfeitas mas com uma reputação pouco desenvolvida.

Algumas das plataformas de vídeo em linha mais populares incluem Dacast, Kaltura, Brightcove e Livestream. Veja a nossa comparação das principais plataformas de vídeo online para obter mais informações sobre algumas das melhores opções do mercado.

Uma das principais razões para uma empresa ou organização profissional utilizar uma plataforma de vídeo online é o facto de estas oferecerem soluções plug-and-play para a maioria dos desafios que as empresas de radiodifusão enfrentam.

2. Carregue o seu vídeo ou ligue fontes

Depois de ter configurado a sua plataforma de vídeo online, é tempo para carregar o seu conteúdo de vídeo. Cada plataforma é único em termos do funcionamento do processo de carregamento de vídeos a pedido. No Dacast, por exemplo, pode carregar vídeos individuais ou carregamento em massa.

Por outro lado, se pretender transmitir em direto, terá de criar um canal em direto antes de poder avançar em para o passo 3. Eis como pode fazer isso utilizando o Dacast:

1. No menu da esquerda, localize e clique no botão “Adicionar +”.
2. Seleccione “Live Stream” (Transmissão em direto) no menu.
3. Aparecerá uma janela. Quando isso acontecer, adicione um título e seleccione “Padrão” como o seu tipo de fluxo.
4. Clique em “Criar”.

Siga os passos acima indicados para criar um canal em direto e alojar a sua transmissão em direto com êxito. Está agora pronto para o passo 3.

Nesta fase, vai querer configurar as suas fontes. Para tal, será provavelmente necessário configuração do codificador e ligar as fontes através daí. Se ainda não tem um codificador, recomendamos vivamente que descarregue uma versão gratuita do OBS para Dacast. É fácil de configurar e começar a utilizar.

Mais uma vez, utilizámos o Dacast como exemplo neste passo, mas o processo pode variar de plataforma para plataforma.

3. Escolha um código de incorporação

Agora é altura de escolher um código de incorporação. Existem vários tipos de códigos incorporados que são adequados para diferentes casos de utilização.

O Dacast oferece duas opções de código incorporado para transmissão em direto: JS e iframe. Ambos trabalham para reprodução no seu sítio Web ou aplicação através de computadores e dispositivos móveis, desde que o ficheiro de vídeo o suporte.

O código de incorporação JS é o código de incorporação predefinido para o Dacast e suporta a maioria das funcionalidades. Isto inclui ser reativo se os elementos forem concebidos em tamanhos diferentes e trabalhar com a funcionalidade de restrição de referenciadores.

O iFrame é o código de incorporação mais universalmente compatível. A ressalva é que algumas características não trabalhar com ele.

Este código incorporado não é reativo, o que significa que tem um tamanho fixo. Por vezes, a função de ecrã inteiro também é removida. Normalmente, isto só acontece se está a a utilizar iframes dentro de iframes.

O recurso de restrição de referenciador baseado em URL não trabalhar com a incorporação de iframe. É por esta razão que o Dacast opta por utilizar o código JS por defeito.

4. Aceder ao código do seu sítio Web

Em seguida, terá de localizar o local no seu construtor de sítios Web que lhe dá acesso ao código do sítio.

Em geral, existe um modo de edição de blocos que lhe permite arrastar e largar elementos, e um modo de editor de texto dá-lhe acesso ao HTML do sítio. Para esta etapa, é necessário encontrar o editor HTML.

Para que possa ver como pode ser fácil, vamos guiá-lo através deste passo utilizando WordPress, um dos construtores de sítios Web mais populares.

Eis o que o processo de acesso ao código do seu site no WordPress será parecido:

1. Abra a página ou publicação onde pretende adicionar o vídeo
2. Haverá No canto superior esquerdo existe um sinal de mais; clique nele
3. Procurar a palavra “Vídeo” no menu de elementos
4. Arraste e largue o elemento de vídeo na parte da página ou publicação onde pretende que o vídeo fique
5. Clique nos três pontos (…) na parte superior do elemento de vídeo e clique em “Editar como HTML”.

Se, por qualquer razão, ainda tiver uma versão mais antiga do WordPress, poderá ter de mudar do “Editor Visual” para o “Editor HTML Editor”. É pouco provável que isso aconteça seja o caso.

Se estiver a utilizar uma plataforma diferente do WordPress, consulte o nosso guia dedicado à incorporação de um leitor de vídeo em diferentes construtores de sítios Web. Fornece instruções específicas sobre como abrir o editor HTML no Weebly, Wix, Google Sites, Shopify, Squarespace, GoDaddy, Zyro, e Yola.

5. Inserir o código de incorporação

Lembra-se do código de incorporação que copiou no passo 3? Cole-o no HTML do seu sítio Web através do editor de texto.

Assim, continuando com o exemplo do WordPress que apresentámos no passo anterior (Passo 4): Depois de clicar nos pontos na parte superior do elemento de vídeo e clicar em “Editar como HTML,” vai então:

1. Colar o seu código de incorporação
2. Pré-visualização
3. Clique em “Atualizar”

É assim tão fácil.

É importante salientar que, depois de colar o snippet do código de incorporação no código do seu site, deve pré-visualizá-lo para se certificar de que tem o aspeto da forma que pretende.

Quando estiver satisfeito com a pré-visualização, clique em “Guardar,” “Publicar,” ou “Atualizar” para guardar as suas alterações. Reveja as alterações no sítio ativo para se certificar de que tudo correu como pretendido. necessidade para isso.

Sugestão: Certifique-se de que o analisa em diferentes dispositivos, como o telemóvel, o tablet e o computador portátil. Por vezes, pode parecer perfeito num dispositivo e desajeitado noutro.

Como incorporar vários reprodutores de vídeo numa página

Incorporar vários leitores de vídeo numa única página é ligeiramente diferente de incorporar apenas um fluxo HLS.

Este processo é relativamente fácil, mas requer alguma codificação. Segue-se um exemplo de código de como incluir vários jogadores numa única página.

Para utilizar este código, copie e cole ele no seu editor de HTML ou de código na página web à qual pretende adicionar o seu leitor de vídeo. Em seguida, substitua os segmentos de código “XXXXX_f_XXXXX” pela ID dos seus canais em direto.

O código correto pode ser encontrado consultando o código de partilha do Facebook para os canais em questão:

<!DOCTYPE html>
 <!--
 
To change this license header, choose License Headers in Project 
Properties.
To change this template file, choose Tools | Templates and open 
the template in the editor.
 -->
 <html>
 <head>
 <title>Test Player</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, 
initial-scale=1.0">
 <script src="//player.dacast.com/js/player.js"></script>
 </head>
 <body>
 <div id='test1'></div>
 <div id='test2'></div>
 <div id='test3'></div>
 <div id='test4'></div>
 <div id='test5'></div>

<script>
 var myPlayer1 = dacast('XXXXX_f_XXXXX','test1',
{player:'vjs5', width:600,height:400});
 myPlayer1.onReady(function(){
 myPlayer1.play();
 });
 var myPlayer2 = dacast('XXXXX_f_XXXXX','test2',{
player:'vjs5', width:600,height:400});
 myPlayer2.onReady(function(){
 myPlayer2.play();
 });
 var myPlayer3 = dacast('XXXXX_f_XXXXX','test3',
{player:'vjs5', width:600,height:400});
 myPlayer3.onReady(function(){
 myPlayer3.play();
 });
 var myPlayer4 = dacast('XXXXX_f_XXXXX','test4',
{player:'vjs5', width:600,height:400});
 myPlayer4.onReady(function(){
 myPlayer4.play();
 });
 var myPlayer5 = dacast('XXXXX_f_XXXXX','test5',
{player:'vjs5', width:600,height:400});
 myPlayer5.onReady(function(){
 myPlayer5.play();
 });
 </script>
 </body>
 </html>

Alojamento de vídeo gratuito vs. alojamento de vídeo pago

Já discutimos em pormenor por que razão deve incorporar um vídeo no seu site em vez de usar plataformas gratuitas. Mas ainda pode utilizar plataformas gratuitas como o Youtube para alojar os seus vídeos e incorporar esses vídeos no seu site se essa for a sua única opção.

No entanto, há desvantagens a considerar. Para começar, a marca (como um logótipo do YouTube, por exemplo) irá provavelmente permanecerá nos vídeos. Além disso, os espectadores ainda podem clicar no vídeo e ser direccionados para fora do seu sítio Web. Quando clicam no vídeo, voltamos à estaca zero. Podem agora estar num sítio como o YouTube, onde provavelmente serão recomendados vídeos de outros criadores.

Outras desvantagens incluem:

• Pirataria: Atualmente, a pirataria de vídeos é bastante fácil nas plataformas gratuitas. Isto acontece quando as pessoas roubam e distribuem o seu vídeo sem autorização e sem lhe darem crédito.
• Benefícios de SEO perdidos: O número de tempo que os utilizadores passam no seu sítio (chamado “tempo de permanência”) é considerado um fator que contribui para a SEO. Isto significa que, se alguém clicar no vídeo a partir do seu sítio Web, esse alguém pode ser levado para o YouTube e obter os benefícios de SEO (não que eles precisem disso!)
• Sem apoio ao cliente: Entrar em contacto com o apoio ao cliente do YouTube é quase impossível. Na sua maioria, têm muitos documentos de autoajuda. Por isso, se a transmissão em direto falhar ou deixar de funcionar, terá de resolver o problema.
• Falta de controlo: O YouTube é vulgarmente conhecido por parar abruptamente os vídeos se ouvir alguma canção popular a tocar em segundo plano. Mesmo se um estranho passar de carro a tocar uma música popular, a sua transmissão em direto pode ficar em risco. Há também inúmeras histórias de canais inteiros que foram encerrados por razões arbitrárias.

A ligação entre HLS e M3U8

M3U8 é um formato de ficheiro que é utilizado no streaming de vídeo. Trata-se da a versão Unicode do formato M3U formato de ficheiro de computador. A extensão de ficheiro para este tipo de ficheiro é “.m3u8”.

O HLS foi criado com base no formato de ficheiro M3U8, pelo que, por vezes, o “streaming HLS” é referido como “Transmissão M3U8.” Assim, um leitor HLS é por definição, um leitor HLS M3U8.

Algumas plataformas de streaming, como o Dacast, usam ligações M3U8 para transmitir para aplicações de smart TV. Isto é um pouco mais técnico do que as definições normais em muitas plataformas de streaming. Mas para os criadores de conteúdos que necessitam de especificações HLS/M3U8 um pouco mais exactas, a Dacast tem uma gama de opções de personalização disponíveis.

Alternativa HLS: MPEG-DASH

O MPEG-DASH (abreviadamente DASH) é outra forma de tirar partido da transmissão em fluxo contínuo com taxa de bits adaptável. Pode, em alternativa, incorporar um leitor HTML5 no seu sítio Web utilizando DASH Adaptive Streaming em vez de HLS. No entanto, acreditamos que o HLS é o caminho a seguir porque o DASH tem uma grande desvantagem a considerar.

A maior desvantagem da DASH em relação com O HLS é compatível com o dispositivo. Os dispositivos Apple apenas suportam HLS. Por outras palavras, o DASH não será reproduzido em dispositivos Apple, como iPhones e MacBooks. Tendo em conta a popularidade dos dispositivos Apple, esta é uma consideração importante.

No passado, o DASH tinha a vantagem sobre o HLS por oferecer melhor qualidade com taxas de bits mais baixas, mas já não há essa vantagem uma distinção entre os dois. Da mesma forma, o DASH suportava anteriormente vídeos de maior resolução em comparação com o HLS, mas, a partir de 2017, esse deixou de ser o caso.

Por estas razões, o HLS é o caminho a seguir.

Conclusão

A HLS é indiscutivelmente o protocolo de transmissão mais inovador na transmissão em direto. Preencheu uma necessidade importante à medida que o Flash Player foi saindo e HTML5 ganhou fama, permitindo ao mundo aceder ao streaming de vídeo em dispositivos móveis. Seria difícil imaginar o mundo atual sem ela!

A capacidade de incorporar um fluxo HLS em qualquer lugar com apenas alguns cliques dá aos organismos de radiodifusão mais controlo sobre a experiência do seu espetador do que nunca.

A Dacast oferece soluções robustas para configurar um leitor de vídeo ou uma transmissão em direto de forma imediata e fácil.

Inscreva-se para uma avaliação gratuita de 14 dias, sem necessidade de cartão de crédito, e veja como é fácil aprender a incorporar ou criar um fluxo HLS hoje mesmo.

Para obter informações adicionais sobre o software de transmissão de vídeo HLS ou a incorporação de uma transmissão HLS, não hesite em contactar a nossa equipa de apoio. Teremos todo o teremos todo o gosto em responder a quaisquer perguntas que possa ter.

Comece a trabalhar gratuitamente

Para obter regularmente dicas de transmissão em direto e ofertas exclusivas, pode juntar-se ao nosso grupo do LinkedIn.