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

Question

我是个菜鸟，所以请对我宽容一些。

我正在尝试构建一个网页，该网页将有一个视频播放器以及播放器右侧充当播放列表的视频列表。为了实现跨浏览器兼容性，我使用“Video for Every”生成的 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 的伪属性(这些是一件事吗？)，其中包含该视频的 URL，一个是 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. 用 2 个新的 html 字符串替换这些源元素，这些字符串将变量插入为 src 属性的值

5. 加载视频

   $(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();
       });
   });

(旁注:请注意，这两种 html 方法中都没有 html 字符串？实际上有!但显然我比我想象的更擅长破坏代码，因为无论我如何，它们都不会显示在 stackoverflow 上这样做，代码块该死。如果有人也能弄清楚如何解决这个问题......？)

当然，没有任何效果。据我所知，当单击列表元素时，源元素甚至没有被删除，这意味着 Google 托管的 jQuery CDN 已损坏(哈!)，或者我正在做一些非常愚蠢且明显错误的事情。我什至不确定这是否是设置播放列表的正确方法。因此，任何向我提出的建议都将非常感激，特别是如果它涉及最少的普通 JS(主要是因为我不懂 JS)并且建议是温和地提出的。对我到底做错了什么的解释也很好。提前致谢!

Answer 1

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

哦等等。

无论如何，对于一些在 50 年内苦苦思考这个问题的可怜的傻瓜，我通过在我的 jQuery CDN 请求前面放置一个 https: 解决了这个问题。出于某种原因，这确实有所不同。