Pesquise...

Últimos Posts

Arquivo de Posts

2024 - 2023 - 2022 - 2021 - 2020 - 2019 - 2018 - 2017 - 2016 - 2015 - 2014 - 2013 - 2012

Postagens Populares

Vem Comigo

     
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Tecnologia do Blogger.

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!

8 comentários:

Anônimo disse...

s´ra que tem como fazer um com playlist tipo com os canais a baixa e so clicar em cima da logo do canal para reproduzilo?


Sim, é possível.

Com dedicação e programação para web você consegue fazer uma playlist deste tipo.

Obrigado pela visita.


Boa noite, me manda o esquema pra fazer tocar no Android


Tenho os link em hls, mais não sei o exemplo de fazer


Saudações Henrique,

Eu não tenho nem um exemplo de playlist com este sistema. Caso desenvolva algum eu te mando e também posto aqui no blog.

Obrigado pela visita.

Fica bem.


Anônimo disse...

obrigado amigo, voce me ajudou muito, Deus te abençoe


Eu sou um autodidata kkkkkk, e ,como tenho Há 2 anos um site generalista,eu tenho encontrado muitos players em m3u8 que não funcionam em (embed simples) por isso pesquisei e encontrei 2 ou 3 que funcionam 100% (ESTE É UM D'ELES) mas como eu gosto de enfeitar o "ramo de flôres digamos assim" eu adicionei a seguir ao (poster="//lh3.googleusercontent.com/cbE0oPcN9ybGpP-VNVkz9AEnzWezqdbXXdEBcsWI0PLbCYQwPYYEMGJW-C253khNNRk"style="border: #FF0000 2px solid;"> ou antes do width="1180" (o seguinte) style="border: #FF0000 2px solid;"width="1180" e podes mudar as cores do frame e expessura,copiando de uma (tabela de cores da net) tambem deu para mudar o tamanho do (PLAYER) a meu gosto .......COLOSSAL....PARABÉNS!!!!F.C.S.
Deixo aqui o meu BLOG-SITE se quiseres dar uma olhada VALEU https://blogbrushofdali.blogspot.com/p/blog-page.html


Sancarock disse...

Fantástico, utilizando nesse exato momento no meu site


Postar um comentário