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é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:
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.
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
Fantástico, utilizando nesse exato momento no meu site