Streaming

Pré requisitos:

  • Editor html notepad++ ou Sublime Text

Criando o arquivo html5

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:

streaming01.png

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:

streaming02.png

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 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:

streaming03.png

Acesse o 4YouSee Manager Conteúdo >> ConteúdoAdicionar (1, 2, 3) na tela de conteúdo não preencha o campo Duração (4), clique em Selecionar Arquivo (5) e escolha o arquivo index.html, selecione a Categoria (6) e clique no botão Adicionar (7).

Exemplo abaixo:

streaming04.png

Ainda com dúvidas? Abrir chamado de suporte

Comentários

Powered by Zendesk