7

Estou tentando fazer uma lista com videos do Youtube da seguinte forma.

              (ps:Eu sei que o Youtube ja tem uma playlist dele.)

Exemplo:

Lista com o nomes dos videos.

1 - Trailer Reaction: Star Wars: Episode VII - The Force Awakens

2 - Star Wars The Force Awakens Trailer- Fan Reaction

Video 1 -

  <iframe width="560" height="315" src="https://www.youtube.com/embed/LQMo6cVGq9o?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Video 2 -

 <iframe width="560" height="315" src="https://www.youtube.com/embed/LwHrBVOQ8qU?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Como pode ver na lista acima tem 2 videos, o que queria fazer é que os videos só fiquem visíveis quando for clicado em alguma opção da lista.

Mas o video só aparecesse em baixo da opção.

Exemplo:

1 - Trailer Reaction: Star Wars: Episode VII - The Force Awakens

Video

 <iframe width="560" height="315" src="https://www.youtube.com/embed/LQMo6cVGq9o?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Quando for clicado outra opção da lista o video que está aberto se esconde e a outra opção aparece.

Seria uma espécie de mostra e esconde. só que em forma de lista.

O video estaria escondido no nome do video e só apareceria quando clicado.

Poderia ser em javascript ou de alguma forma que não precise de um codigo muito grande.

Aqui eu tenho um exemplo mas esse é em forma de botões eu gostaria de fazer o mesmo só que em lista: http://jsfiddle.net/qhe7gfd3/

O projeto poderia servir não apenas para videos mas qualquer outro conteúdo que fosse necessário esconde para não deixa a pagina muito grande

3 Respostas 3

4

Veja se lhe serve. Usa o mesmo princípio dos botões:

Imagino que esse exemplo possa lhe satisfazer

Eu mesclei os dois exemplos anteriores:

var buttons = $('ul li');
var videos = $('#videoGallery div');
var titles = $('#videoGallery div h3');
var iframe = $('#videoGallery iframe');


var urls = [
  "https://www.youtube.com/embed/6AmRg3p79pM?enablejsapi=1",
  "https://www.youtube.com/embed/MkLFlaWxgJA?enablejsapi=1",
  "https://www.youtube.com/embed/kIhe7nFcbUg?enablejsapi=1",
  "https://www.youtube.com/embed/El3IZFGERbM?enablejsapi=1",
  "https://www.youtube.com/embed/6AmRg3p79pM?enablejsapi=1",
  "https://www.youtube.com/embed/MkLFlaWxgJA?enablejsapi=1",
  "https://www.youtube.com/embed/kIhe7nFcbUg?enablejsapi=1",
  "https://www.youtube.com/embed/El3IZFGERbM?enablejsapi=1"
]

buttons.on('click', function (e) {
    var index = buttons.get().indexOf(this);
		var videoIndex = videos.eq(index);
    iframe.attr("src", urls[index])
    buttons.removeClass("selected")
    $(this).toggleClass("selected")
    videos.removeClass('yesDisplay');
    videoIndex.toggleClass('yesDisplay');
    $('body').animate({scrollTop:(videoIndex.offset().top)}, 200);
 });
.video {
    display:none;
}
.yesDisplay {
    display:block !important;
}
img{
  height: 80px
}
ul{
  margin: 0;
  padding: 0;
}
ul li{
  display: block;
  height: 30px;
  line-height: 30px;
  background: #333333;
  margin: 0;
  cursor: pointer;
  padding-left: 10px;
  color: #ffffff;
}
ul li:hover{
  background: #666666;
  color: #ffffff;
}
.selected{
  background: #cccccc;
  color: #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="videoGallery">
  <ul>
    <li>Vídeo 01</li>
    <li>Vídeo 02</li>
    <li>Vídeo 03</li>
    <li>Vídeo 04</li>
    <li>Vídeo 05</li>
    <li>Vídeo 06</li>
    <li>Vídeo 07</li>
    <li>Vídeo 08</li>
  </ul>

  <div class="yesDisplay video">
    <h3>Vídeo 01</h3>
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
    <p>Este é o vídeo 1:</p>
  </div>
  <div class="video">
    <h3>Vídeo 02</h3>
    <img src="http://goo.gl/ytbJn8" alt="">
    <p>Este é o vídeo 2:</p>
  </div>
  <div class="video">
    <h3>Vídeo 03</h3>
    <img src="http://www.last-video.com/wp-content/uploads/2013/11/superbe-image-de-poissons-sous-l-eau.jpg" alt="">
    <p>Este é o vídeo 3:</p>
  </div>
  <div class="video">
    <h3>Vídeo 04</h3>
    <img src="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" alt="">
    <p>Este é o vídeo 4:</p>
  </div>
  <div class="video">
    <h3>Vídeo 05</h3>
    <img src="http://www.conceptcarz.com/images/Citroen/2010-Citroen-Survolt-Concept-Image-01.jpg" alt="">
    <p>Este é o vídeo 5:</p>
  </div>
  <div class="video">
    <h3>Vídeo 06</h3>
    <img src="http://i1008.photobucket.com/albums/af201/visuallightbox/Butterfly/8-1.jpg" alt="">
    <p>Este é o vídeo 6:</p>
  </div>
  <div class="video">
    <h3>Vídeo 07</h3>
    <img src="http://michaeldaviddesign.com/themes/escape/files/stacks_image_85.jpg" alt="">
    <p>Este é o vídeo 7:</p>
  </div>
  <div class="video">
    <h3>Vídeo 08</h3>
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS_grGhfAqTFlVrVmKC3HJ9R6CuXPfgz6U6ikgOnfgHxiu38c13" alt="">
    <p>Este é o vídeo 8:</p>
  </div>

  <iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Você pode perceber que ele vai carregar bem rapidamente, já que como eu disse no comentário os outros elementos carregam rapidamente. E é isso que acontece, ele não carrega todos os vídeos, e sim od outros elementos html. Há apenas um iframe e é esse que mudará seu src ao clicar em algum botão. Os outros (imagem e texto, no meu exemplo) mudará com o vídeo correspondente.

Outros exemplos

Primeiro caso

Primeiramente, para consegui a façanha de pausar o vídeo do youtube a partir do iframe, você deve substituir os ?controls=0&amp;showinfo=0 por ?enablejsapi=1 ao final das urls do seus vídeos, pois assim será possível a utilização a api que possibilita essas funções.

Com isso basta selecionar o iframe desejado com o atributo contentWindow e aplicar a ele o:

 .postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
 // pauseVideo - outra opção seria o playVideo

E para que o vídeo apareça como no início:

 .postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');

Entretando, neste último caso, além do ?enablejsapi=1 deve se acrescentar após &version=3&playerapiid=ytplayer.

Exemplo funcionando: JsFiddle

Segundo caso

Vale lembrar que essa API é própria do youtube. Cada host (Vimeo, Uol, Dailymotion, Youtube...) vai ter a sua própria. Como pode ser observado nesse exemplo: https://css-tricks.com/play-button-youtube-and-vimeo-api/.

Entretando, há uma maneira genérica de parar os vídeos independente de suas origens. Basta resetar os seus src. Isso irá servir apenas para parar, como já foi dito. Contudo, exigirá um desempenho maior e fará com que o aparecimento do vídeo não seja instantâneo.

No exemplo abaixo o vídeo 01 pertence ao Vimeo, já o vídeo 02 pertence ao Dailymotion e carregam normalmente. Para isso, no seu iframe você deve capturar o código para o embed na área voltada a isso no próprio site do host.

Exemplo: JsFiddle

Terceiro caso

Eu criei uma array com as urls de cada vídeo. Depois acessei da mesma forma que nos iframes por meio do index dos buttons.

var buttons = $('ul li');
var videos = $('#videoGallery div');
var titles = $('#videoGallery div p');
var iframe = $('#videoGallery div iframe');

var urls = [
  "https://www.youtube.com/embed/6AmRg3p79pM?enablejsapi=1",
  "https://www.youtube.com/embed/MkLFlaWxgJA?enablejsapi=1",
  "https://www.youtube.com/embed/kIhe7nFcbUg?enablejsapi=1",
  "https://www.youtube.com/embed/El3IZFGERbM?enablejsapi=1"
]

function pauseVideo() {
  var iframes = document.getElementsByTagName("iframe");
  iframes[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

}
buttons.on('click', function() {
  var index = buttons.get().indexOf(this);
  var videoIndex = videos.eq(index);
  titles.html("Vídeo " + (parseFloat(index)+1));
  iframe.attr("src", urls[index])
  $('body').animate({
    scrollTop: (videos.offset().top)
  }, 200);
  buttons.removeClass("selected")
  $(this).toggleClass("selected")
  pauseVideo();
});
.yesDisplay {
  display: block !important;
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
  display: block;
  height: 30px;
  line-height: 30px;
  background: #333333;
  margin: 0;
  cursor: pointer;
  padding-left: 10px;
  color: #ffffff;
}
ul li:hover {
  background: #666666;
  color: #ffffff;
}
.selected {
  background: #cccccc;
  color: #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="videoGallery">
  <ul>
    <li>Vídeo 01</li>
    <li>Vídeo 02</li>
    <li>Vídeo 03</li>
    <li>Vídeo 04</li>
  </ul>
  <div class="yesDisplay">
    <p>Video 1</p>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/6AmRg3p79pM?enablejsapi=1" frameborder="0" id="IframeVideo1" allowfullscreen></iframe>
  </div>
</div>

1
  • Achei bem interessante essa solução. To vendo se consigo arrumar o toggle do que postei. Talvez a sua seria legal colocar um link ao lado do título do vídeo para voltar.
    – Huskell
    Commented 13/12/2015 às 1:28
4
<html>
<head>
    <title>Teste</title>
    script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
      function abrirVideo(i) {
        $('iframe').attr('src', $('iframe').attr('src'));
        $(".videos").not("#video" + i).hide();
        $("#video" + i).show();
      }
    </script>
    <style type="text/css">
      .videos {
        display: none;
      }
    </style>
</head>
<body>
  <p id="texto1" onclick="abrirVideo(1)">1 - Trailer Reaction: Star Wars: Episode VII - The Force Awakens</p>
  <iframe id="video1" class="videos" width="560" height="315" src="https://www.youtube.com/embed/LQMo6cVGq9o?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
  <p id="texto1" onclick="abrirVideo(2)">2 - Star Wars The Force Awakens Trailer- Fan Reaction</p>
  <iframe id="video2" class="videos" width="560" height="315" src="https://www.youtube.com/embed/LwHrBVOQ8qU?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Usando um script para gerar a lista você consegue ir trocando apenas os id dos vídeos e a função onClick, dessa forma ela deverá chamar corretamente independente de quantos itens forem colocados.

O CSS faz com que todos os vídeos comecem minimizados.

5
  • Seria isso, mas não teria como quando alguem clica no video 1 e termina de ver o video e clica no video 2 o video 1 se escondesse?
    – Endou
    Commented 13/12/2015 às 0:47
  • Entendi. Daqui a pouco irei editar com essa função de trocar de vídeo.
    – Huskell
    Commented 13/12/2015 às 0:48
  • @Endou, veja se meu exemplo faz o que você deseja. Commented 13/12/2015 às 0:56
  • @Endou Agora tem o toogle que você queria, talvez você queria optar pela resposta do Samir, já que lá tem umas transições mais bonitas xD
    – Huskell
    Commented 13/12/2015 às 1:56
  • A sua opção tambem é muito boa, estarei testando as duas
    – Endou
    Commented 13/12/2015 às 2:08
4

Se bem que entendi, o que queres fazer é adicionar o vídeo logo abaixo de cada título quando clicado.

Eu criei este script, no qual ele cria o elemento que contém o video e o mostra logo abaixo do título. Esta solução também tem a vantagem de quando estiveres a assistir um video e clicares em outro video qualquer, ele vai parar a reprodução do video anterior que estava a reproduzir, pois ele vai substituir todo o bloco de código que contém o video, evitando que dois videos fiquem a tocar em simultâneo, não estragando assim a experiência do usuário.

Eu criei um atributo - data-videoID que é implementado em cada item/video da lista da Galeria de Videos, no qual irá conter o id do video do Youtube. Assim quando clicarmos num video/item da lista, este id será obtido e substituído direto na criação do iframe para cada video através de JavaScript.

Tens aqui também um exemplo no JSFiddle se preferires: http://jsfiddle.net/src_code/hwr600kn/2/

var buttons = $('#videoGallery .vid');
var liHeight = $('#videoGallery li').height();

buttons.click(function(){
    var videoID = $(this).attr('data-videoID');
    var videos = $('<div id="meuVideo"> <iframe width="560" height="315" src="https://www.youtube.com/embed/'+ videoID +'?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div>');

    $('#meuVideo, .nowPlaying').remove();
    videos.insertAfter(this).hide().slideDown("fast");
    $('<span class="nowPlaying">▼ Reproduzindo ...</span>').insertAfter(this);
    $('html, body').animate({
        scrollTop: (videos.offset().top-liHeight)
    }, 200);
});

$('#close').click(function(){
    $('#meuVideo, .nowPlaying').remove();
});
#videoGallery ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#videoGallery span {
    display: block;
    background-color: steelblue;
    color: #fff;
    font-family: sans-serif;
    cursor: pointer;
    padding: 4px 10px;
    border-bottom: 1px solid #fff;
}

#videoGallery li {
    position: relative;
}
span.nowPlaying {
    position: absolute;
    top: 0;
    right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="videoGallery">
 <ul>
    <li><span class="vid" data-videoID="6AmRg3p79pM">Video 1</span></li>
    <li><span class="vid" data-videoID="MkLFlaWxgJA">Video 2</span></li>
    <li><span class="vid" data-videoID="kIhe7nFcbUg">Video 3</span></li>
    <li><span class="vid" data-videoID="El3IZFGERbM">Video 4</span></li>
    <li><span id="close">Fechar Tudo</span></li>
</ul>
</div>

7
  • Não sei se o erro é só comigo, mas fui testar o codigo e os videos não funcionam. A sua opção é otima, mas somente para videos. como disse na minha pergunta, eu procuro uma opção que não seja usada apenas para videos, mas tambem para conteudo html, e outras opções que diminua o tamanho de uma pagina, escondendo prte de conteudo em um menu. exemplo: mostra e esconde <div> conteudo</div> . a sua opção está próxima da que estou procurando.
    – Endou
    Commented 13/12/2015 às 14:25
  • Não teria como substituir o iframe do javascript apenas pela div? e usa no <lI> o conteudo que queira que mostre e esconda?
    – Endou
    Commented 13/12/2015 às 15:45
  • Se testas-te aqui pelo o Code Snippet do Stack Overflow, os videos não irão funcionar porque o SO não suporta videos do Youtube. Para veres o código em ação, acessa antes o link do jsFiddle que postei. Ele para mim está a funcionar corretamente, testei nas ultimas versões do Chrome, Mozilla e no Microsoft Edge. Mais tarde quando tiver mais tempo eu vejo se crio uma solução para essa necessidade que mencionas-te agora.
    – Chun
    Commented 13/12/2015 às 20:44
  • Nessa parte do codigo <li><span class="vid" data-videoID="El3IZFGERbM">Video 1</span></li> não teria como adiciona outros servidores alem do youtubbe? exemplo: Video 1 (Youtube) (Dalymotion) (UOL) - entende? em cada video adicionar 3 servidores ou mais do mesmo video.
    – Endou
    Commented 15/12/2015 às 15:31
  • Chun, poderia da uma olhada aqui: jsfiddle.net/zh61vq0z/11 - veja eu usei da maneira que vc explicou. só que o video não abre em baixo do menu Reproduzindo. ele abre no final da lista. eu adionei uma lista com 12 videos, mas o video não abre de forma mais organizada. tentei mexer no css, mas fica muito desorganizado a forma como aparece. a maneira mais legal, seria clicar em uma opção e o video abri logo abaixo,sem quebra o desgner dos botoes do menu, e tambem a opçção fechar tudo, só funciona na primeira opção
    – Endou
    Commented 20/12/2015 às 16:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .