Video Jquery Exchange

Question

I can’t do that after clicking the button, change the video I wanted the video to change at the top, but appears 2 after clicking the button...

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>

Answer 1

In your HTML you have this structure:

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

Your Javascript function is replacing the contents of the div with ID div_video.

If what you want is to replace the original video with a new one then you should put that video within of div#div_video to be erased/replaced and remain so:

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

that is to say:

<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>

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

Answer 2

When you’re calling the setVideo(), is modifying HTML directly from <div id="div_video">. Your page, however, originally has no HTML inside the <div>, and a tag of <video> upstairs.

The first video is from the first <video> from up there, and the second one is the one who turns up after calling the setVideo().

If you want a video to appear first, without having to click a button, and without setting the <video> in HTML, could use the onload thus:

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