1

Não to conseguindo fazer com que após clicar o botão, trocasse o vídeo Eu queria que o vídeo trocasse no de cima, mas aparece 2 após clicar no botão...

function setvideo(src) {
    document.getElementById('div_video').innerHTML = '<video autoplay controls id="video_ctrl" style="height: 100px; width: 100px;"><source         src="'+src+'" type="video/mp4"></video>';
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video autoplay id="video_ctrl" style="height: 100px; width: 100px;">
    <source src="video.mp4" type="video/mp4">
</video>

<button onClick="setvideo('video.mp4');">Video1</button>
<button onClick="setvideo('video2.mp4');">Video2</button>
<div id="div_video"> </div>

0

2 Respostas 2

2

No teu HTML tens esta estrutura:

body
 |-video
 |-button
 |-button
 |-div#div_video

A tua função JavaScript está a substituir o conteúdo da div com ID div_video.

Se o que pretendes é substituir o video original por um novo então deves colocar esse video dentro da div#div_video para ser apagado/substituído e ficar assim:

body
 |-button
 |-button
 |-div#div_video
    |-video

ou seja:

<button onClick="setvideo('video.mp4');">Video1</button>
<button onClick="setvideo('video2.mp4');">Video2</button>
<div id="div_video">
    <video autoplay id="video_ctrl" style="height: 100px; width: 100px;">
        <source src="video.mp4" type="video/mp4" />
    </video>
</div>

Exemplo: http://jsfiddle.net/7bhe7k8r/

1
  • 1
    Muito Obrigado :D Commented 21/07/2015 às 23:04
0

Quando está chamando o setVideo(), está modificando o HTML direto do <div id="div_video">. A sua página, porém, originalmente não tem nenhum HTML dentro do <div>, e um tag de <video> lá em cima.

O primeiro vídeo é do primeiro <video> de lá em cima, e o segundo é o que aperece depois de chamar o setVideo().

Se você quer que aparece um vídeo primeiro, sem ter que clicar numa botão, e sem definir o <video> em HTML, poderia usar o onload assim:

<button onclick="setvideo('video.mp4');">Video1</button>
<button onclick="setvideo('video2.mp4');">Video2</button>
<div id="div_video" onload="setvideo('video.mp4');">
</div>

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 .