Pesquise...

Últimos Posts

Arquivo de Posts

2017 - 2016 - 2015 - 2014 - 2013 - 2012

Postagens Populares

Vem Comigo!

     
  •      
  •  
  •  
  •  
  •  
  •  
Tecnologia do Blogger.

Boletim Informativo?

* obrigatório

Total de Acessos


Saudações,

Ontem eu estava "curiosando" na internet procurando alguns canais abertos que transmitisse via IPTV, e acabei encontrando links que exigiam a instalação de um programa de terceiro para visualizar a transmissão.

Eu usei o VLC e o SMPlayer para carregar o arquivo m3u8; e tudo correu bem! Contudo, alguns usuário não se sentem confortáveis em instalar programas; gostam de tudo centralizado no navegador.

Com isto em mente, eu me perguntei: o navegador poderia tocar nativamente links do tipo HLS!

Toque links M3U8/HLS via HTML5 com o projeto video.js


Se você tem um link M3U8, e deseja transmiti-lo em seu website utilizando a tecnologia HTML5, o projeto video.js é ideal para fazer HTTP Live Streaming ( HLS ).

Tudo o que você precisa encontra-se na biblioteca video.js e em um dos seus plugins; o videojs-contrib-hls!

Não é necessário baixar as bibliotecas, basta usar um CDN para carrega-las no seus site; veja:

Crie uma pagina html usando o contudo abaixo como exemplo...

<!DOCTYPE html>
<html>
<head>
<title>Rede S&eacute;culo 21 - AO VIVO</title>
<meta name="generator" content="Bluefish 2.2.10" >
<meta name="author" content="Francisco C Soares" >
<meta name="date" content="2017-06-30T11:23:37-0300" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">

<!-- http://videojs.com/ -->
<link href="//cdnjs.cloudflare.com/ajax/libs/video.js/6.2.1/video-js.min.css" rel="stylesheet">
<script src="///cdnjs.cloudflare.com/ajax/libs/video.js/6.2.1/video.min.js"></script>

</head>
<body>

<video
    id="rs21"
    width="640"
    height="360"
    class="video-js vjs-default-skin"
    controls
    poster="//lh3.googleusercontent.com/cbE0oPcN9ybGpP-VNVkz9AEnzWezqdbXXdEBcsWI0PLbCYQwPYYEMGJW-C253khNNRk">
    <source
        src="//tvseculo21-lh.akamaihd.net/i/tvseculo_1@16110/index_500_av-p.m3u8?sd=10&rebase=on"
        type="application/x-mpegURL">
</video>

<!-- http://videojs.com/plugins/ -->
<!-- https://npmjs.org/package/videojs-contrib-hls -->
<script src="//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.7.0/videojs-contrib-hls.min.js"></script>
<script>
var player = videojs('rs21');
player.play();
</script>

</body>
</html>

Viu como é simples? Em poster="//lh3.googleusercontent.com/cbE0oPcN9ybGpP-VNVkz9AEnzWezqdbXXdEBcsWI0PLbCYQwPYYEMGJW-C253khNNRk" eu carrego a imagem de fundo do player, e em src="//tvseculo21-lh.akamaihd.net/i/tvseculo_1@16110/index_500_av-p.m3u8?sd=10&rebase=on" eu indico a localização, a URL do fluxo de vídeo.

Como a minha esposa gosta muito dos programas Mulher.com e Assim Fica Fácil, do canal Rede Século 21, então, eu aproveitei que eles disponibilizam o link M3U8 para fazer este post. POR FAVO NÃO ME PROCESSEM! ^_^

Veja o videos.js com o plugins videojs-contrib-hls em ação em dotjunior.com/hls-via-html5-com-videojs.html.

Pronto, agora temos uma streaming do tipo M3U8/HLS sendo tocada como um arquivos mp4, mpeg, etc.

Ah!!! Quer ver uma coisa legal? Se você estiver usando o Chromium, ou um de seus derivados como o Opera ou o Google Chrome, e se você tem um Chromecast, ou algo do tipo, você pode enviar a imagem do navegador para sua TV. Clique com o botão direito do mouse em cima do vídeo, e clique na opção "Transmitir..." (Cast...); veja:

Opção "Cast..."
Configuração do Cast


Paz a todos!

0 comentários:

Postar um comentário