Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

evandrofelipe

como colocar em loop eterno a exibicao de videos utilizando api youtube?

Recommended Posts

tenho script abaixo e serve que sejam exido video dentro do site utilizando a api do youtube. funciona bem, o único problema é que não consigo configurar que seja fique em loop eterno.
você saberia como fazer a configuração de forma que ao terminar o video o mesmo seja reexibido novamente e permaneça em loop eterno?

> <style>
.cover {
  position: absolute;
//  top: 0;
//  left: 0;
  z-index: 2;
  width: 100%;
  height: 600px;
}
.cover .hi {
  position: relative;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: 'Roboto Slab', serif;
  font-size: 24px;
  line-height: 26px;
  text-align: center;
}
.cover .hi span {
  color: #ff0;
  cursor: pointer;
  text-decoration: underline;
}
.cover .hi em {
  font-style: normal;
}
.cover .hi em.hidden {
  display: none;
}
.tv {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 600px;
  overflow: hidden;
}
.tv .screen {
  position: relative;
  top: 0;
//  right: 0;
//  bottom: 0;
//  left: 0;
  z-index: 1;
  margin: auto;
  opacity: 0;
  transition: opacity .5s;
}
.tv .screen.active {
  opacity: 1;
}
</style>
<div class="cover">
  <div class="hi">
 <?
 //echo  'Jair Batista Imóveis!<br>Ajudando a realizar seu sonho...';
 ?>
  </div>
</div>
    <div class="tv">
          <div class="screen mute" id="tv"></div>
    </div>

<script src='//static.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >var tag = document.createElement('script');
        tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var tv,
        playerDefaults = {autoplay: 1, autohide: 1, modestbranding: 0, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3, loop : 1};
var vid = [

            {'videoId': 'ER5sOEIt3dM', 'startSeconds': 0,  'suggestedQuality': 'hd720'},
            {'videoId': 'V8NAWrKlsAU', 'startSeconds': 0,  'suggestedQuality': 'hd720'},
            {'videoId': 'J57HnR6FPW0', 'startSeconds': 0,  'suggestedQuality': 'hd720'}

        ],
        randomVid = Math.floor(Math.random() * vid.length),
    currVid = randomVid;

$('.hi em:last-of-type').html(vid.length);

function onYouTubePlayerAPIReady(){
  tv = new YT.Player('tv', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults});
}

function onPlayerReady(){
  tv.loadVideoById(vid[currVid]);
  tv.mute();
}

function onPlayerStateChange(e) {
  if (e.data === 1){
    $('#tv').addClass('active');
    $('.hi em:nth-of-type(2)').html(currVid + 1);
  } else if (e.data === 2){
    $('#tv').removeClass('active');
    if(currVid === vid.length - 1){
      currVid = 0;
    } else {
      currVid++;
    }
    tv.loadVideoById(vid[currVid]);
    tv.seekTo(vid[currVid].startSeconds);
  }
}

function vidRescale(){

  var w = $(window).width()+200,
    h = $(window).height()+200;

  if (w/h > 16/9){
    tv.setSize(w, w/16*9);
    $('.tv .screen').css({'left': '0px'});
  } else {
    tv.setSize(h/9*16, h);
    $('.tv .screen').css({'left': -($('.tv .screen').outerWidth()-w)/2});
  }
}

$(window).on('load resize', function(){
  vidRescale();
});

$('.hi span:first-of-type').on('click', function(){
  $('#tv').toggleClass('mute');
  $('.hi em:first-of-type').toggleClass('hidden');
  if($('#tv').hasClass('mute')){
    tv.mute();
  } else {
    tv.unMute();
  }
});

$('.hi span:last-of-type').on('click', function(){
  $('.hi em:nth-of-type(2)').html('~');
  tv.pauseVideo();
});

//# sourceURL=pen.js
</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.