Como incorporar um player de vídeo HTML5 em seu site usando HLS e DASH Adaptive Streaming

O Flash Player da Adobe há muito é usado como o player de vídeo principal para a Internet. Reinou por muito tempo, mas está sendo substituído por protocolos mais rápidos, eficientes e que facilitam o gerenciamento de arquivos. O Google Chrome também começou a bloquear o Flash e em breve encerrará totalmente o suporte ao Adobe Flash. Pode levar algum tempo para substituir totalmente esse protocolo legado, mas certamente traz seus benefícios. Alguns dos navegadores mais recentes têm suporte nativo para HLS (HTTP Live Streaming).

HTML5 e HLS são protocolos de código aberto, o que significa que qualquer pessoa pode modificar seu código e utilizá-lo em seu site, totalmente gratuito. Codificar um vídeo em vários padrões diferentes de qualidade de reprodução, legendas fechadas e otimizar a qualidade do vídeo de acordo com a largura de banda são feitos de forma contínua com streaming de vídeo HLS. Devido ao HTML nativo tag, o streaming de HTML5 vem no código, facilitando o streaming por HLS e DASH. O DASH e o HLS dividem um fluxo de vídeo em pequenos segmentos que podem ser usados ​​para um player de vídeo HTML5. Eles reduzem o tempo que você precisa para armazenar um vídeo antes de começar a reproduzir e quaisquer problemas de travamento que você possa encontrar ao assistir a uma transmissão. Os benefícios não se restringem apenas ao visualizador, mas também se estendem ao provedor de conteúdo.

Incorpore um player de vídeo HTML5 em seu site usando JWPlayer

Antes de começar, sugerimos obter o JWPlayer de aqui . Com o surgimento de HLS e DASH sendo usados ​​para propósitos de streaming adaptável, muitos players de vídeo surgiram, os quais certamente fornecem aos usuários sua parte justa dos benefícios. Um desses jogadores que tem resistido aos desafios vez após vez e é usado por empresas como ESPN e Sony Pictures é o JWPlayer. Carregar conteúdo, incorporar o player de vídeo em HTML5, iOS, Android e Fire OS é facilitado com o código nativo do JWPlayer, que pode ser personalizado por você para uma experiência de usuário ainda melhor. Mas nosso foco hoje é em players de vídeo HTML5 e como você pode usar HLS e DASH para um streaming melhor adaptável.

O que o JW Player oferece?

Além de fornecer a você uma plataforma para enviar seus vídeos e transformá-los em uma lista de reprodução, o JWPlayer também permite que você visualize estatísticas em tempo real de seus vídeos enviados, fornecendo relatórios de suas programações de anúncios e relatórios personalizados.

Relatórios personalizados

O JWPlayer facilita o gerenciamento de conteúdo para o seu site com CMS, permitindo que você gerencie facilmente legendas, miniaturas, metadados etc. Portanto, o uso e os benefícios do JWPlayer vão além de apenas ser um reprodutor de vídeo para incorporar seus vídeos HTML5.

Envio de vídeos no JWPlayer

Envie vídeos

Antes de começar a incorporar o JWPlayer em seu site HTML5, é importante primeiro fazer o upload dos respectivos vídeos na plataforma JWPlayer. Felizmente, essa não é uma tarefa muito complexa, pois tudo o que você precisa fazer é selecionar o arquivo que deseja enviar.

Uma vez que o vídeo é carregado, você pode começar a editar a seção de metadados desse vídeo, visualizar as análises e monitorar o tráfego, etc. ou obter fontes para HLS e enviar legendas ocultas na guia de ativos.

Personalização do player de vídeo HLS e DASH

Antes de incorporar um player de vídeo, você deve primeiro adicionar uma biblioteca do player ao seu site. Existem três maneiras pelas quais você pode realizar esse feito. Auto-hospedado, hospedado na nuvem e hospedado na nuvem com chamadas de API. A diferença entre hospedagem em nuvem e hospedagem em nuvem com chamadas de API é simplesmente baseada nas chamadas de API. Recomenda-se que os desenvolvedores que desejam gerenciar a implementação de seu player de vídeo por meio de chamadas de API usem isso. Para hosts próprios, a versão do player é totalmente controlada por você. É importante observar que a licença do jogador não é alternada automaticamente e deve ser feita manualmente ao usar o self-host.

Personalização do player hospedado na nuvem

Como você pode ver aqui, o player hospedado na nuvem pode ser personalizado e polido de acordo com sua preferência. Por exemplo, o jogador pode ter um tamanho responsivo ou fixo. A reprodução pode ser definida para um loop, mudo no início, etc. Além disso, você também pode alterar a cor padrão do player, as recomendações dos vídeos e muito mais.

Depois de ter tudo isso para baixo, você deve fazer o upload do código da Biblioteca do jogador hospedada na nuvem em sua página da web tag para permitir que o JWPlayer seja carregado em seu site.

Incorporando o player de vídeo

Por padrão, o JWPlayer prefere automaticamente os mecanismos de mídia HTML5 para que você não precise se preocupar em definir uma preferência principal. No entanto, alguns casos podem exigir que você mude isso. Quando isso acontecer, você pode personalizar o player e configurá-lo do seu jeito.

Depois de fazer o upload da biblioteca do player hospedado na nuvem para a tag de sua página da web, a próxima etapa é fazer upload do código incorporado. Primeiro, crie um etiqueta no onde o JWPlayer deve aparecer. Ligar para configuração() com a propriedade da lista de reprodução para chamar o jogador no alvo .

Abaixo está um exemplo de um exemplo configuração() código que é fornecido pelos próprios desenvolvedores JWPlayer:

jwplayer ('myElement'). setup ({'playlist': 'https://example.com/myVideo.mp4