Changing Video on img click

Question

I have three videos and thumbnails for them. I'm trying to change the src of the initial video based on which thumbnail is selected.

My HTML:

<video id="trailers">
            <source src="vLast.mp4" type="video/mp4">
            <source src="vLast.webm" type="video/webm">
</video>

<div id="playlist" class="animated fadeInRight">
    <div class="thumb" id="tGow"><img src="TbGow.jpg" onClick="changeTrailer()"/></div>
    <div class="thumb" id="tLast"><img src="TbLast.jpg" onClick="changeTrailer()"/></div>
    <div class="thumb" id="tTwo"><img src="TbTwo.jpg" onClick="changeTrailer()"/></div>
</div>

My script:

function changeTrailer(){
    
    var media = document.getElementById('trailers')
    var thumb = document.getElementsByTagName("img")
    if(thumb.getAttribute("src") == "TbGow.jpg"){
        media.src = "vGow.mp4";
        media.load();
        media.play();
    }else if (thumb.getAttribute("src") == "TbLast.jpg"){
        media.src = "vTwo.mp4";
        media.load();
        media.play();
    }else if(thumb.getAttribute("src") == "TbLast.jpg"){
        media.src = "vLast.mp4";
        media.load();
        media.play();
    }
}

Sorry. I felt someone with java experience might be able to understand the problem. — Batman, Feb 10 '13 at 07:29
`document.getElementsByTagName("img")` is a collection. for this case use `document.getElementsByTagName("img")[0]`, but you really should be using jQuery — u.k, Feb 10 '13 at 07:46
this is an intro to html5 class so we're restricted to html5 css and javascript. — Batman, Feb 10 '13 at 07:50
I tried this: (thumb[0].getAttribute("src") == "TbGow.jpg") but now every thumbnail I try returns true for the first statement. — Batman, Feb 10 '13 at 07:56
I need a condition that will differentiate each img tag by the source. I guess I could also use the id's but I feel like it's a lot more work then it needs to be — Batman, Feb 10 '13 at 07:58
You really need to understand what is happening here. `getElementsByTagName` returns an array, of all the elements with the specified tag name. Which in this case is `img`. So now you end up having an array of the 3 thumbnails (since they all have the `img` tag). Now when you say `thumbs[0]`, the first element gets selected, whose source is already equal to `TbGow.jpg`. Hence, the first `if` statement will return a `true` value. — Vishnu, Feb 10 '13 at 08:00
What you can do is, on `onClick` pass different arguments to the `changeTrailer()` function depending upon the element that has been clicked upon. Now go through the answer I posted to get an idea. Better yet, try it out, for it will actually work! — Vishnu, Feb 10 '13 at 08:02
Your solution will work, I know understand it. However, could you show me how I'd do it if I needed to use two sources .mp4 and .webM. So I guess using two parameters — Batman, Feb 10 '13 at 08:05
http://stackoverflow.com/questions/5703203/html5-video-change-multiple-sources — Vishnu, Feb 10 '13 at 08:08
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/24260/discussion-between-vishnu-and-batman) — Vishnu, Feb 10 '13 at 08:15

Vishnu · Accepted Answer · 2013-02-10T08:35:26.833

1

getElementsByTagName is going to return an array of all elements with that particular tag-name. Hence your thumb.getAttribute("src") will fail. What you can alternately do is :

HTML :

<video id="trailers"> 
    <source src="vLast.mp4" type="video/mp4"> 
    <source src="vLast.webm" type="video/webm"> 
</video> 

<div id="playlist" class="animated fadeInRight"> 
    <div class="thumb" id="tGow"><img src="TbGow.jpg" onClick="changeTrailer('vGow')"/></div> 
    <div class="thumb" id="tLast"><img src="TbLast.jpg" onClick="changeTrailer('vTwo')"/></div> 
    <div class="thumb" id="tTwo"><img src="TbTwo.jpg" onClick="changeTrailer('vLast')"/></div> 
</div>

JavaScript :

function changeTrailer(source){
    var media = document.getElementById('trailers') 
    var source1 = media.children[0]; 
    var source2 = media.children[1]; 
    source1.src = source+'.mp4'; 
    source2.src = source+'.webm'; 
    media.load(); 
    media.play(); 
}

edited Feb 10 '13 at 08:35

answered Feb 10 '13 at 07:33

Vishnu

2,024
3
28
34

Sorry, I don't understand the use of source as the parameter. – Batman Feb 10 '13 at 07:35
1

`onClick`-ing one of the thumbnails, you call the function `changeTrailer()`, passing to it the corresponding source, which is then assigned to the video-tag. – Vishnu Feb 10 '13 at 07:37
Wouldn't it pass the source of the element that onclick is attached to? Therefore assignment the img source to the video, which wouldn't work. – Batman Feb 10 '13 at 07:42
plus there is no source in the img tag. – Batman Feb 10 '13 at 07:43
1

Please go through the code that I've written thoroughly first. `onClick`, I'm manually passing the source of the required video. – Vishnu Feb 10 '13 at 07:48

score 0 · Answer 2 · answered Feb 10 '13 at 07:27

0

When you say media.src = "vGow.mp4"; you are setting the source attribute of vGow.mp4 to media element that you have defined to be the video tag, by using document.getElementById('trailers'); But actually html5 <video> tag hasn't any source attribute. It is actually the source attribute of the <source> tag that you need to update.

answered Feb 10 '13 at 07:27

defau1t

10,593
2
35
47

I changed it to: var media = document.getElementByTagName('source') but that doesn't fix it. – Batman Feb 10 '13 at 07:31
I think the main issue is the if condition. I don't know if the way I wrote it makes sense. – Batman Feb 10 '13 at 07:33

Changing Video on img click

2 Answers2