6

Tenho alguns links, exemplo: Link1 Link2 Link3 Link4 e gostaria que ao clicar no Linkx ele abra um "embed" logo abaixo dele, e que cada Link traga seu vídeo correspondente.

Estou trabalhando em um theme wordpress, no qual estou tentando modificar algumas partes... Não consegui resolver esta questão pois não sei como esconder os videos.

Clica no Link1 ele abre o video do Link1
Clica no Link2 ele abre o video do Link2

Tem que ser na mesma página e também tem que ser logo abaixo do link...

6
  • 2
    Basta colocá-los em um div com display:none, nessa pergunta existem respostas para mostrar um div quando clicar em um link. A lógica é a mesma, se tiver alguma dúvida pode editar a sua pergunta explicar o que não conseguiu e se possível incluir algum código (mesmo que não funcionando) de como tentou fazer. Commented 24/09/2015 às 17:28
  • @renan obrigado, estava acompanhando este outro link... porém ficou a duvida... ao dar play e depois ocultar a div, o play continua rolando... oque posso fazer? Commented 24/09/2015 às 17:30
  • Vc pode usar jquey. Algo do tipo $('#elementodovideo').pause(); Commented 24/09/2015 às 18:07
  • @rochasdv ainda estou com um problema, os exemplos que vi no link indicado, estão trabalhando somente com 1 botão. No meu cenário eu possuo 1 link para cada vídeo.... Commented 24/09/2015 às 18:09
  • @HenriqueSilva para pausar o video já tentou utilizar uma função do tipo: function destroyVideo(objeto){ var url = $("#video1").attr('src'); $("#video1").attr('src', ''); $("#video1").attr('src', url); } Commented 18/10/2016 às 11:18

2 Respostas 2

0

Eu não trabalho com wordpress mas acredito que dê pra trabalhar com jQuery nele normalmente, certo? Se puder você coloca um listener para cada link, na ação de clique em cada link você exibe ou escoda uma div, onde abrirá o video. Algo mais ou menos assim:

    <a id="link1" href="#">LINK1</a>
    <div id="divvideo1">
        <video id="video1" src="demo.mp4" controls autoplay >HTML5 Video </video> 
    </div>

 <a id="link2" href="#">LINK2</a>
    <div id="divvideo2">
        <video id="video2" src="demo.mp4" controls autoplay >HTML5 Video </video> 
    </div>

<script>

$('#link1').click(function(){

    $('#divvideo2').hide();
    $('#video2').pause();
    $('#divvideo1').show();
    $('#video1').play();

});

</script>

Eu não testei o código, pode ter erros de escrita, mas a ideia (pelo o que entendi) seria mais ou menos isso.

2
  • Testei, não funcionou... Inclui o display:none para eles ficarem ocultos, porém ao clicar no Link1 ele não trouxe o video Commented 24/09/2015 às 18:27
  • Como eu poderia reutilizar este código: pt.stackoverflow.com/questions/66123/… . Para que ele não esconda o link que cliquei? Commented 24/09/2015 às 18:59
0

O seu problema consiste no seguinte:

"Dada uma lista de links, ao clicá-los, abaixo do item clicado será exibido um vídeo"

Para isso, você precisará controlar bem os blocos de exibição da página, para que os vídeos fiquem bem alinhados em relação aos links.


Breve comentário

Eu optei por fazer um menu horizontal (sem apelo visual), mas que o vídeo apareça abaixo dos itens logo que clicado. Você pode dispor de outro modo, por exemplo, pôr cada par item-video em uma linha. O fato é que ao clicar num link, após aberto o primeiro vídeo, o anterior logo se fechará e pausará.

A solução que eu sugiro, tem alguns pontos que vale apena você olhar com mais calma. São eles:


Solução:

var v = document.getElementsByClassName('myVideo');
        function classToggle(id) {
            v[id].classList.toggle('hide');
            v[id].classList.toggle('active');
        }

        function closeOtherVideo(id) {
            var c = document.getElementsByClassName('myVideo');
            for(var i=0; i<c.length; i++){
                if(i != id) {
                    v[i].pause();
                    c[i].classList.remove('active')
                    c[i].classList.add('hide')
                }
            }
        }

    document.getElementById('toVideo1').addEventListener('click', function() { classToggle(0),closeOtherVideo(0)});
    document.getElementById('toVideo2').addEventListener('click', function() { classToggle(1),closeOtherVideo(1)});
    document.getElementById('toVideo3').addEventListener('click', function() { classToggle(2),closeOtherVideo(2)});
    document.getElementById('toVideo4').addEventListener('click', function() { classToggle(3),closeOtherVideo(3)});
.container {
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #cbc9c7;
    border-radius: 0.25rem;
}
 
.box {
    width: 100%;
    padding: 2rem;
    text-align: center;
}
 
 .myVideo {
     background-color: #000000;
     width: 440px;
     margin: 0 auto;
 }

.boxHeader {
    width: 100%;
    text-align: center;
    padding: 1rem 0;
}
.video-menu {
    width: 440px;
    margin: 0 auto;
}

.boxHeader a {
    margin: 0.275rem;
}
  
.boxBottom {
    width: 100%;
}

.active {
    display: inline-block;
}

.hide {
    display: none;
}
    <div class="container">
        <div class="box">
            <div class="boxHeader">
                <div class="video-menu">
                    <a href="#" id="toVideo1" class="showVideo">video 1</a>
                    <a href="#" id="toVideo2" class="showVideo">video 2</a>
                    <a href="#" id="toVideo3" class="showVideo">video 3</a>
                    <a href="#" id="toVideo4" class="showVideo">video 4</a>
                </div>
            </div>
            <div class="boxBottom">
                <video id="video1" class="myVideo hide" controls src="https://instagram.fsdu12-1.fna.fbcdn.net/v/t50.2886-16/100818563_141790667457660_2448482643239076991_n.mp4?_nc_ht=instagram.fsdu12-1.fna.fbcdn.net&_nc_cat=100&_nc_ohc=k6HEU2Q2YFgAX-jAG04&oe=5ED64CB4&oh=a7ac00f8b0f4eb2b680fb19bf6e56bff">
                    <p>HTML5 audio is not supported on your browser</p>
                </video>
                <video id="video2" class="myVideo hide" controls src="https://instagram.fsdu12-1.fna.fbcdn.net/v/t50.2886-16/101407297_578758382771748_4583302688695556657_n.mp4?_nc_ht=instagram.fsdu12-1.fna.fbcdn.net&_nc_cat=100&_nc_ohc=3rAFHrkfrRsAX97dk3o&oe=5ED6B16D&oh=375b9fc3f99175160b6a308439bd5682">
                    <p>HTML5 audio is not supported on your browser</p>
                </video>
                <video id="video3" class="myVideo hide" controls src="https://instagram.fsdu12-1.fna.fbcdn.net/v/t50.2886-16/100635180_248551773073170_469297836861370934_n.mp4?_nc_ht=instagram.fsdu12-1.fna.fbcdn.net&_nc_cat=106&_nc_ohc=VjO27SKjb9kAX_YE0Rs&oe=5ED66E98&oh=d301180c213df6954f5f06f32193389e">
                    <p>HTML5 audio is not supported on your browser</p>
                </video>
                <video id="video4" class="myVideo hide" controls src="https://instagram.fsdu12-1.fna.fbcdn.net/v/t50.2886-16/93155023_146306196903209_2004287997341602261_n.mp4?_nc_ht=instagram.fsdu12-1.fna.fbcdn.net&_nc_cat=105&_nc_ohc=u4WdSeVhJFMAX9uYGeE&oe=5ED662F2&oh=758ea19e44728a476bb89716fee74170">
                    <p>HTML5 audio is not supported on your browser</p>
                </video>
            </div>
        </div>      
    </div>

Deixei no exemplo a adição dos eventos via getElementById pegando cada link "manualmente". Mas você pode deixar mais enxuto e elegante fazendo assim:

    var sv = document.querySelectorAll('.showVideo');    
      sv.forEach((element, key) => {
        element.addEventListener('click', function(){
          classToggle(key),
          closeOtherVideo(key)
      })
    });

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 .