我有一个视频库,需要我能够通过单击换出 mp4 的 href 和替代 ogv 视频文件,然后将新源加载到页面。
我编写的脚本在 Firefox 中完美运行,但在 IE 或 Chrome 中却不行。
我检查了变量是否正在填充,我尝试将缓存设置为 false 并使用随机字符串附加 url,但仍然没有乐趣。
这是脚本:
//Click and Hover events for thumbnail list
$(".video_thumb ul li:first").addClass('active');
$(".video_thumb ul li").click(function(){
//Set Variables
var vidAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var vidSrc = $(this).find('a').attr("href"); //Get video link href
var vidAltSrc = vidSrc.replace(".mp4", ".ogv"); //Create 2nd variable with alternate source
if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Swap out video links
$('#vid video source#video1').attr('src', vidSrc);
$('#vid video source#video2').attr('src', vidAltSrc);
$('#vid video').attr('title', vidAlt);
$('#vid video').load();
};
$(".video_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
}) .hover(function(){
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
这是页面的html:
<div class="main_image">
<div id="vid">
<video width="600" controls title="Video Title" style="z-index:1000;">
<source id="video1" src="videos/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source id="video2" src="videos/video.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
</div>
任何帮助都会非常受欢迎。