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

时间:2013-06-19 17:59:11

标签: jquery video attributes playlist

我是一个总菜鸟,所以请放轻松我。

我正在尝试构建一个网页,其中包含视频播放器和播放器右侧的视频列表,用作播放列表。为了跨浏览器兼容性,我正在使用'Video for Everybody'生成的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();
        });
    });
  6. (旁注:请注意html方法中没有html字符串?实际上有!但显然我在破坏代码方面比我想的更好,因为无论我在哪里,它们都不会在stackoverflow上显示做,代码块是darned。如果有人能弄清楚如何解决这个问题......?)

    当然,没有任何作用。据我所知,当点击列表元素时,源元素甚至都没有被删除,这意味着谷歌托管的jQuery CDN被破坏了(哈!)或者我正在做一些非常愚蠢而且明显错误的事情。我甚至不确定这是否是设置播放列表的正确方法。因此,对我提出的任何建议都会非常感激,特别是如果它涉及最小的香草JS(主要是因为我不知道JS)并且建议被轻轻抛出。究竟我做错了什么的解释也会很好。提前谢谢!

1 个答案:

答案 0 :(得分:2)

嗯,首先,我要感谢大家的帮助。如果没有你们,我至少需要一周的时间来解决这个难题。

哦等等。

无论如何,对于一些在50年内苦苦挣扎这个问题的可怜的傻瓜,我通过在我的jQuery CDN请求前放置https:来解决问题。出于某种原因,这确实有所作为。