jQuery and HTML5 video - change source onClick

Question

I have to create an interactive video using HTML5 and jQuery. My goal is to:

Play video1
When video1 ends show button1, onClick change to video2 and hide button1
Play video2
On Ended show button 2, OnClick change to video 3
and so on...

My question to you is, what am I doing wrong? This is my code.

<section> 
<video autoplay="autoplay" controls="controls" onended="testEnded()">
    <source id="srcWebm" src="media/Madagascar.webm"/>
</video>
</section>

<section id="buttons" class="btnShow">
    <ul id="buttons2" hidden>
        <li><a href="#" id="choice1" onclick="changeSrc1()">VW</a></li>

    </ul>
</section>

The function testEnded() is in an external sheet (which is linked properly to the html). The script is as follows:

function changeSrc1() {
    $('#srcWebm').attr('src','media/VW.webm');

}

function testEnded() {
        $('#buttons2').removeAttr('hidden');
    }

When I execute changeSrc1() nothing happens. I have tried linting the code - no errors...

What should I do? Thanks!

Possible duplicate: stackoverflow.com/questions/3983036/…

MacMac
– MacMac

2012-03-19 18:50:38 +00:00
Commented Mar 19, 2012 at 18:50 — MacMac
– MacMac, Commented Mar 19, 2012 at 18:50

Zenvied · Accepted Answer · 2012-05-01 20:23:58Z

2

I have managed to make something similar work:

<video id="video" autoplay="autoplay" controls="controls">
 <source id="srcWebm" src="media/Madagascar.webm"/>
</video>

var video = document.getElementById("video"); 
video.src = "your link here";

However, this is currently giving me issues in IE9.

answered May 1, 2012 at 20:23

Zenvied

731 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Bulygin · Accepted Answer · 2012-03-19 15:15:25Z

0

I have found the solution: apparently, jQuery does not support changing the 'src' attribute of the <source>. Bug?

answered Mar 19, 2012 at 15:15

Daniel Bulygin

11 silver badge1 bronze badge

Comments

LONGI · Accepted Answer · 2012-03-21 11:55:05Z

0

than delete all children from <video>-tag, and create a new <source> element which you insert into the <video> node

answered Mar 21, 2012 at 11:55

LONGI

11.5k11 gold badges61 silver badges96 bronze badges

Comments

Dhaval · Accepted Answer · 2012-11-08 06:38:25Z

0

Check this plugin, it has some properties which can be useful for you.

Download Plugin

http://videojs.com/

API Reference

http://videojs.com/docs/api/

I hope it will help you.

answered Nov 8, 2012 at 6:38

Dhaval

9013 gold badges8 silver badges26 bronze badges

Collectives™ on Stack Overflow

jQuery and HTML5 video - change source onClick

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related