Change multiple video sources dynamically with jQuery

Question

I'm a total noob, so please go easy on me.

I'm attempting to build a webpage that will have a video player and a list of videos to the right of the player that act as a playlist. In the interest of cross-browser compatibility, I'm using 'Video for Everybody'-generated html.

<video controls width="640" height="360">
    <source id='mp4src' src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    <source id='webmsrc' src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="allowFullScreen" value="true">
        <param name="wmode" value="transparent">
        <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}">
    <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below">
</object>

When the user clicks on a list item, I want the video associated with that list item to be played in the video player. In order to do this I built an HTML list and gave each list item 2 pseudo-attributes (are those even a thing?) called url1 and url2 that contain the URLs for that video, one in mp4 and one in WebM format.

<ul id='playlist'>
    <li class='plvid' id='vid1' url1='homilies/kursk1_30_11.mp4' url2='homilies/kursk1_30_11.webm'>
        <h5>Vid1</h5> <span class='descrip'>describevid1</span> <br> 
        <span class='runtime'>eternity or 1 hr.</span> 
    </li>
    <li class='plvid' id='vid2' url1='homilies/video.mp4' url2='homilies/video.webm'
        <h5>Vid2</h5> <span class='descrip'>describevid2</span> <br> 
        <span class='runtime'>eternity or 1 hr.</span> 
    </li>
</ul>

I then wrote some jQuery that should, in theory, do the following:

1. Notice when someone clicks on a list item, and then start doing all this stuff:
2. Get the values of the url1 and url2 pseudo-attributes, and store them as jQuery variables
3. Delete the 2 source elements that are currently inside the video tags
4. Replace those source elements with 2 new html strings that have the variables interpolated as the values of the src attributes

5. Load the video

   $(document).ready(function(){
       $('#playlist li').click(function(){
           var url1 = $(this).attr('url1');
           var url2 = $(this).attr('url2');
           $('.content video #mp4src').remove();
           $('.content video #webmsrc').remove();
           $('.content video').html(
               ""
           );
           $('.content video').html(
               ""
           );
           $('.content video')[0].load();
       });
   });

(Side note: notice how there are no html strings in either html method? There actually are! But apparently I'm even better at breaking code than I thought, because they won't display here on stackoverflow no matter what I do, code block be darned. If someone could figure out how to fix that too...?)

And, of course, nothing works. As far as I can tell the source elements aren't even deleted when a list element is clicked, which means either the the Google-hosted jQuery CDN is broken (hah!) or that I'm doing something very stupidly and obviously wrong. I'm not even sure if this is the right way to go about setting up a playlist. So, any advice thrown at me would be much appreciated, especially if it involves minimal vanilla JS (mostly because I don't know JS) and the advice is thrown gently. Explanations of exactly what I'm doing wrong would also be nice. Thanks in advance!

Answer 1

Well, first of all I'd like to thank everyone for all their help. It would've taken me at least a week to solve this dilemma without you guys.

Oh wait.

Anyway, for some poor sap who drudges up this question in 50 years, I fixed the problem by putting an https: in front of my jQuery CDN request. For some reason, that really makes a difference.