CODEWITHSUNDEEP
javascriptjqueryhtml
zangetsKid
zangetsKid

Reputation: 27

How to change video src attribute values in jQuery?


I'm just wondering how to change src attribute value using jQuery after clicking a link. I want when user click a link on the webpage, a new video will be played as a transition to another page. Here's what my html and jquery look like right now:

<script type = "text/javascript" src = "jquery-1.10.2.js"></script>
<script type = "text/javascript" language = "javascript">

$(document).ready(function() {
   $("a").click(function() {
       //alert("Test");
       $("#vid source:nth-child(1)").attr("src","Media/bar-transition.mp4");
       $('#vid source:nth-child(2)').attr("src","Media/bar-transition.webm");
       $('#vid source:nth-child(3)').attr("src","Media/bar-transition.ogv");
       $('#vid')[0].play();
   });  
});
</script>

<body onload = "setTimeout(showIt,3000)">

<div id="main">
    <video id="vid" autoplay />
   <source src="Media/test-vid-rev.mp4" type="video/mp4" />
   <source src="Media/test-vid-rev.webm" type="video/webm" />
   <source src="Media/test-vid-rev.ogv" type="video/ogg" /> 
   Your browser do not support the video type
</video>
<div class="nav-transition">
   <ul id="nav">
      <li id="graphic"> <a href="#g"></a></li>
          <li id="product"> <a href="#p"></a></li>
          <li id="digital"> <a href="#d"></a></li>
          <li id="view"> <a href="#v"></a></li>          
       </ul>
   </div>
</div>

when I clicked the link("#g","#p",etc), the video source doesn't get changed..is there anything wrong with my jQuery syntax? Can anybody help? I'm a newbie to jQuery..

Thx
-zangetsKid

Upvotes: 1

Views: 2091

Answers (1)

COLD TOLD
COLD TOLD

Reputation: 13579

I think you need to add 

$('#vid')[0].load()

Upvotes: 1

Related Questions