Question

我有一个视频库，要求我能够通过单击更换mp4和其他ogv视频文件的href，然后将新源加载到页面。

我编写的脚本在Firefox中完美运行，但在IE或Chrome中无效。

我已经检查了变量是否正在填充，我已经尝试将缓存设置为false并使用随机字符串附加网址但仍然没有快乐。

这是脚本：

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

非常欢迎任何帮助。

Answer 1

你应该使用$（“。video_thumb ul li”）。each（function（）{$（this）.click（function（）{.... 代替 $（“。video_thumb ul li”）。click（function（）{

jQuery交换视频源，然后.load（）无法在IE8 / Chrome中运行

1 个答案: