Jquery video exchange

Question

Jquery video exchange

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I can not get you to change the video after clicking the button I wanted the video to change on the top, but it appears 2 after clicking the ...

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><videoautoplayid="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>

jquery html5 video

asked by anonymous 22.07.2015 / 00:31

2 answers

0

When you are calling setVideo() , you are modifying the direct HTML of <div id="div_video"> . Your page, however, originally does not have any HTML inside <div> , and a <video> tag up there.

The first video is from the first <video> from above, and the second is what it opens after calling setVideo() .

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

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

22.07.2015 / 01:04

Doubts Arduino Views with php transition with the controller

score 2 · Accepted Answer

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 you want to replace the original video with a new one then you should put this video inside of div#div_video to be erased / replaced and look like this:

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

that is:

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