jQuery and HTML5 video - change source onClick

Question

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

1. Play video1
2. When video1 ends show button1, onClick change to video2 and hide button1
3. Play video2
4. On Ended show button 2, OnClick change to video 3
5. 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!

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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