4YouSee permite a exibição do streaming através do seu player, portanto esta documentação considera que você já tem a url que carrega o streaming. Caso contrário, recomendamos alguns servidores de streaming baseados na nuvem, como Youtube, Twich, Facebook Live, AfreecaTV, Aparatm, Boomstream, Breakers.TV.
Caso você não queira transmitir um streaming pela internet, mas em uma rede local, consulte esta documentação, Streaming local [Atualizar link]
Pré requisitos:
Utilize um dos editores de texto recomendados abaixo:
Criando o arquivo html5
Clique aqui para fazer o download do arquivo, bastando apenas alterar a URL e o tempo conforme explicado nesta documentação. Abaixo temos também o passo a passo para a criação de um arquivo desde o início, caso queira seguir.
Crie um arquivo do tipo (index.html) e preencha com as marcações
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VIDEO YouTube</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Entre as tags <head> ... </head> é necessário criar o css para deixar a pagina responsiva.
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
body {
-webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-style: preserve-3d;
}
.body-class{
background-color: transparent;
}
@meday screen and (min-width: 320px) {
body {
font-size: 38%;
}
}
@meday screen and (max-width: 720px) {
body {
font-size: 70%;
}
}
.container {
position: absolute;
font-family:'Arial';
text-align: left;
color: rgb(0, 0, 0);
width: 100%;
height: 100%;
left: 0%;
top: 0%;
}
.video {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
left: 0%;
top: 0%;
}
</style>
Exemplo abaixo:
Entre as tags <body> ... </body> e as tags <div id="container"> ... </div> adicione a tag <object id="videoURL" data=""> </object> como no exemplo abaixo.
<div id="container">
<object class="video" id="videoURL" data=""></object>
</div>
Exemplo abaixo:
Após a tag de fechamento </body> é necessário também criar o código javascript. Nesse código vamos tratar as variáveis TEMPO e videoURL, a variável TEMPO é utilizada para definir o tempo de exibição do vídeo em segundos e deve receber um valor numérico, a variável videoURL deve receber a URL do vídeo no YouTube e deve seguir o padrão abaixo.
<script type="text/javascript">
var element = document.querySelector("#videoURL");
var TEMPO = 10;
var videoURL = 'https://www.youtube.com/embed/2I4PyX3CC_4';
window.loadNews = function() {};
if(videoURL){
element.setAttribute('data', videoURL+ "?rel=0&autoplay=1&autohide_controls=1");
}
if(TEMPO){
var MILISECONDS = 1000;
var NEWS_TIME_IN_SECONDS = TEMPO;
var NEWS_TIME = NEWS_TIME_IN_SECONDS * MILISECONDS;
setTimeout(function(){ Android.finish();}, NEWS_TIME);
}
</script>
Exemplo abaixo:
Acesse o 4YouSee Manager Conteúdo >> Conteúdo
clique no botão Adicionar
na tela de conteúdo não preencha o campo Duração (1), clique em Selecionar Arquivo (2) e escolha o arquivo index.html, selecione a Categoria (3) e clique no botão Adicionar (4).
Baixe o arquivo de Exemplo.