Pesquise...

Postagens

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.

    Há!!! 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