CODEWITHSUNDEEP
javascriptjqueryvideohtml5-video
Daniel Bulygin
Daniel Bulygin

Reputation: 1

jQuery and HTML5 video - change source onClick

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!

Upvotes: 0

Views: 5037

Answers (4)

Dhaval
Dhaval

Reputation: 901

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.

Upvotes: 0

Zenvied
Zenvied

Reputation: 73

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.

Upvotes: 2

LONGI
LONGI

Reputation: 11443

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

Upvotes: 0

Daniel Bulygin
Daniel Bulygin

Reputation: 1

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

Upvotes: 0

Related Questions