<head> <style> body { width:1280px; margin:0 auto; } .center { margin-left: auto; margin-right: auto; display: block } img { width: auto; height: 500; } .box { position: relative; float: left; width: 90%; padding: 1em; margin: 1em 0px 1em 50px; background: #fff; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset; } .box:before, .box:after { content: ""; position: absolute; z-index: -2; } .box p { font-size: 40px; font-weight: bold; } /* lifted-corner corners */ .perspective-view:before { left: 80px; bottom: 5px; width: 50%; height: 35%; max-width: 200px; max-height: 50px; -webkit-box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4); -moz-box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4); box-shadow: -80px 0 8px rgba(0, 0, 0, 0.4); -webkit-transform: skew(50deg); -moz-transform: skew(50deg); -ms-transform: skew(50deg); -o-transform: skew(50deg); transform: skew(50deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .perspective-view:after { display: none; } </style> </head> <body bGcolor="black" style="background-image: url(''); background-repeat: no-repeat; background-attachment: fixed; background-position: center;"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <br> <br> <div id="loop-preview"> <div class="item previews-container"> <div id="lp-preview-video"></div> </div> </div> <div class="box perspective-view"> <marquee onended="wes()" id="p1" height=100 width=100% direction=left scrollamount=7><p>Texto com rolamento horizontal</p></marquee> </div>  <script type="text/javascript"> var loopAssets = [{ contentUrl: "sesi.png", contentType: "image/jpg", mediaType: "IMAGE" }]; var serial_device = ''; var mensagem1 = ''; var mensagem = mensagem1.split("*"); var tempo_imagem = ''; var status_video = 'STOP'; var myVideo; var currentIndex = 0; var now_video = ''; var current = ''; var refreshInit = ''; var teste = ''; var videoSources = teste.split(","); var videos_rodados; var refresh = 0; var conta_stop = 0; var posicao_index = 0; var mensagem_ler = 0; var loopAssets2 = new Array(); var loopAssets3 = new Array(); console.log(mensagem1); for (i = 0; i < videoSources.length; i++) { if (videoSources[i].includes(".mp4")) { //console.log('Video: ' + videoSources[i]); loopAssets2 = { contentUrl: videoSources[i], contentType: "video/mp4", mediaType: "VIDEO" }; loopAssets3.push(loopAssets2); } else if (videoSources[i].includes(".jpg")) { //console.log('Imagem: ' + videoSources[i]); loopAssets2 = { contentUrl: videoSources[i], contentType: "image/jpg", mediaType: "IMAGE" }; loopAssets3.push(loopAssets2); } else if (videoSources[i].includes(".png")) { loopAssets2 = { contentUrl: videoSources[i], contentType: "image/png", mediaType: "IMAGE" }; loopAssets3.push(loopAssets2); } } var previewContainer = $(".previews-container"); loopAssets2 = loopAssets3[0]; var curIndex = 1; if (status_video == 'NORMAL') { //console.log('Weslley03'); appendMediaElement(loopAssets3[0]); } // removed the setInterval but kept the function function changeMedia() { //console.log('Weslley01'); if (curIndex >= loopAssets3.length) { // modified this so it would display the first image/video when looping curIndex = 0; } loopAssets2 = loopAssets3[curIndex]; console.log(loopAssets2); appendMediaElement(loopAssets3[curIndex]); posicao_index = curIndex; curIndex++; }; function appendMediaElement(asset) { var mediaEl = ""; document.getElementById("p1").innerHTML = "<p>" + mensagem[mensagem_ler] + "</p>"; if(mensagem_ler >= mensagem.length){ mensagem_ler = 0; }else{ mensagem_ler = mensagem_ler + 1; } //console.log('Weslley02'); if (asset.mediaType == "IMAGE") { mediaEl = '<img class="center" id="lp-preview-image" src="' + asset.contentUrl + '">'; previewContainer.html(mediaEl); // image: go to the next media after 5 seconds var tempo = Number(tempo_imagem) * 1000; console.log('tempo: ' + tempo); videos_rodados = asset.contentUrl; setTimeout("changeMedia()", tempo); } else if (asset.mediaType == "VIDEO") { mediaEl = "<video preload='metadata' autoplay class='center' id='lp-preview-video' controls width=900>"; mediaEl += "<source src='" + asset.contentUrl + "' type='" + asset.contentType + "'>"; mediaEl += "</video>"; previewContainer.html(mediaEl); // video: go to the next media when the video ends videos_rodados = asset.contentUrl; document.getElementById("lp-preview-video").addEventListener("ended", function(e) { changeMedia(); }); }; console.log(loopAssets3); }; var intervalo = setInterval(function(){ $.post('Verifica_status.php', {serial: serial_device}, function(retorna){ console.log(retorna); if (retorna == 'LIVEOK') { clearInterval(intervalo); window.location.href = "youtube.php?serial="; } else if (retorna == 'REFRESH') { clearInterval(intervalo); ; window.location.reload(true); } else if (retorna == 'REFRESHINIT') { clearInterval(intervalo); console.log('Reiniciando desde o inico da playlist'); ; window.location.reload(true); } }); if (loopAssets2.mediaType == "VIDEO") { myVideo = document.getElementById("lp-preview-video"); if (myVideo.paused) { conta_stop = conta_stop + 1; console.log("Parado"); //window.location.reload(true); $.post('now_videos.php', { serial: serial_device, time_current: myVideo.currentTime, status_video: 'Parado' }, function(retorna) { //var videourl = [$html(retorna)]; //$("#conteudo").html(retorna); }); if (conta_stop >= 5) { console.log("Parado ++ 10"); changeMedia(); conta_stop = 0; } } else { conta_stop = 0; $.post('now_videos.php', { serial: serial_device, video_agora: videos_rodados, time_current: myVideo.currentTime, index_video: posicao_index, status_video: 'Rodando' }, function(retorna) { //var videourl = [$html(retorna)]; console.log("weslley: " + retorna); //$("#conteudo").html(retorna); }); console.log("Video esta rodando: " + myVideo.currentTime); } } else { console.log('Rodando imagem agora'); $.post('now_videos.php', { serial: serial_device, video_agora: videos_rodados, time_current: myVideo.currentTime, index_video: posicao_index, status_video: 'Rodando' }, function(retorna) { //var videourl = [$html(retorna)]; console.log("weslley: " + retorna); //$("#conteudo").html(retorna); }); } },5000); </script> </body> </html>