我完全是菜鸟,所以请放轻松。
我正在尝试建立一个网页,该网页将包含一个视频播放器,并在播放器右侧显示一个视频列表,以用作播放列表。为了实现跨浏览器的兼容性,我使用了“ 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,从理论上讲应该执行以下操作:
请注意,当有人单击列表项时,然后开始做所有这些事情:
获取url1和url2伪属性的值,并将它们存储为jQuery变量
删除视频标签中当前包含的2个源元素
用2个新的html字符串替换这些源元素,这些html字符串具有作为src属性值插入的变量
加载视频
$(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)并且建议被轻率地抛出时。确切地解释我在做什么错也很好。提前致谢!
最佳答案
好吧,首先,我要感谢大家的帮助。没有你们,我至少要花一个星期的时间来解决这个难题。
等一下。
无论如何,对于一些在50年后困扰这个问题的可怜的树液,我通过在我的jQuery CDN请求前放置一个https:
来解决此问题。由于某些原因,这确实有所不同。
关于jquery - 使用jQuery动态更改多个视频源,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17198100/