1

mp4 の href と代替の ogv ビデオ ファイルを 1 回のクリックで交換し、新しいソースをページにロードできる必要があるビデオ ギャラリーがあります。

私が書いたスクリプトは、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>

どんな助けでも大歓迎です。

4

1 に答える 1

0

$(".video_thumb ul li").each(function(){$(this).click(function(){ .... $(".video_thumb ul li").click(function の代わりに使用する必要があります(){

于 2013-01-17T15:27:47.380 に答える