jQuery injecting video element with new source

I'm trying to replace webm formated video with another one each time I click on corresponding link, using Chrome (I only have webm media resource).

I succeed in placing the new source in src attribute, following with load() and play() method, but video won't start. When I place the same url in src manually, works well.

This is a part of the HTML:

<figure>
<video id="frag" autoplay controls>
<source src="" type="video/webm">
</video>
</figure>
<p>
<a href="#article3" class="game" rel="http://ninsuna.elis.ugent.be/Media/Showcase开发者_运维百科/Tennis/2009_FROpen_F_Federer-Soderling.webm?t=0.0,270.72">Game 1</a>
</p>
<p>
<a href="#article3" class="game" rel="http://ninsuna.elis.ugent.be/Media/Showcase/Tennis/2009_FROpen_F_Federer-Soderling.webm?t=317.04,379.88">Game 2</a>
</p>
...

and the script:

setTimeout(function() {
$(".game").click(function() {
var videoUrl = $(this).attr("rel");
$('#frag source').attr('src', videoUrl);
$('#frag').load();
$('#frag').play();
});
}, 1000);

(for some reason I have to use timeout, document load doesn't work, for the link list is dynamically generated)

You can check it here more thoughrouly: link to my web

---

You are calling a play method on a jQuery object which will not work. You should either use get or [0] to get the HTMLVideo element and then call play method on it. Same applies to load method as well. Try this

$(function() {
  $(".game").click(function() {
     var videoUrl = $(this).attr("rel");
     $('#frag source').attr('src', videoUrl);
     $('#frag')[0].load();
     $('#frag')[0].play();
  });
});