使用jQuery动态更改多个视频源

Question

我是个彻头彻尾的菜鸟，所以请你对我放松点。

我试图建立一个网页，将有一个视频播放器和一个视频列表的权利，作为播放列表的播放器。为了实现跨浏览器的兼容性，我使用了“每个人的视频”生成的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>

​

当用户单击列表项时，我希望在视频播放器中播放与该列表项关联的视频。为了做到这一点，我构建了一个HTML列表，并给出了每个列表项2伪属性(它们甚至是一种东西吗？)名为url1和url2，包含视频的url2，一个是mp4格式的，一个是WebM格式的。

<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>

然后，我编写了一些jQuery，理论上应该这样做：

1. 请注意，当有人单击列表项时，然后开始执行所有这些操作：
2. 获取url1和url2伪属性的值，并将它们存储为jQuery变量。
3. 删除当前在视频标记中的2个源元素
4. 用两个新的html字符串替换这些源元素，这些字符串的变量被插值为src属性值。
5. 加载视频 $(.ready)(函数(){ $('#playlist li‘).click(){ var url1 = $(this).attr('url1')；var url2 = $(this).attr('url2')；$('.content视频#mp4src').remove()；$('.content视频#webmsrc').remove()；$('.content视频‘).html( "“)；$('.content视频’).html( "”)；$('.content视频‘).load()；})；

(附带注意:注意到在两个html方法中都没有html字符串？真的有！但是显然我比我想象的更善于破解代码，因为不管我做什么，它们都不会在堆栈溢出上显示，代码块是加法的。如果有人也能想办法解决这个问题.)

当然，什么也不起作用。据我所知，当单击list元素时，源元素甚至没有被删除，这意味着谷歌托管的jQuery CDN被破坏了(哈哈！)或者说我做了一件很愚蠢而且显然是错误的事。我甚至不确定这是否是建立一个播放列表的正确方式。因此，任何向我提出的建议都会很感激，特别是如果它涉及到最小的香草JS (主要是因为我不知道JS)，并且建议是轻轻抛出的。解释我到底做错了什么也很好。提前感谢！

Answer 1

首先，我要感谢大家的帮助。如果没有你们，我至少要花一周的时间才能解决这个难题。

哦，等等。

不管怎么说，对于一些在50年内苦读这个问题的可怜的笨蛋来说，我解决了这个问题，我把一个https:放在了我的jQuery CDN请求前面。因为某种原因，这真的很不一样。