UPDATE: dynamically replace the src attribute of embed tag in JavaScript

When I try to change the src attribute of embedded movie (quicktime), it strangely works locally in Firefox, but doesn't work on server in firefox, doesn't work in Safari either locally or on server, and it doesn't work in IE.

I try what was suggested below:

    $(".image_thumb ul li ul li").click(function(){     
var imgTitle = $(this).find('a').attr("href");  
var imgDesc = $(this).find('.block').html(); 
var imgDescHeight = $(".main_image").find('.block').height();   

if ($(this).is(".active")) {  
    return false; 
} else {
    alert(imgTitle);
    var videoClone = $(".main_image object").clone()
       .find("embed").attr({src: imgTitle}).end()  
       .find("param:first").attr({value: imgTitle});
    $(".main_image object").remove();
    $(".main_image").append(videoClone);

    $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
        $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,  marginBottom: "0" }, 250 );

    });
}
//more code

This doesn't make the movie appear at all. Everything gets loaded but movie. Anyone know why? Surely, I can't be the only one using something other than flash to load movies.

html (if helpful):

<div id="vid_wrapper">
    <div class="main_image">
        <object width="160" height="144"
        classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
        codebase="http://www.apple.com/qtactivex/qtplugin.cab">
        <param name="src" value="../images/Intro-1.mov">
        <param name="autoplay" value="true">
        <param name="controller" value="false">




        <EMBED SRC="../images/Intro-1.mov" WIDTH=500 HEIGHT=380 AUTOPLAY=true CONTROLLER=true LOOP=false PLUGINSPAGE="http://www.apple.com/quicktime/"> <!--    <img src="" alt="video_1"> -->
        </object>


        <div style="display: block;" class="desc">
            <a href="#" class="collapse">Close Me!</a>
            <div style="opacity: 0.85; margin-bottom: 0px; display: block;" class="block">
                    <h2>Video 1</h2>
                    <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
                </div>
        </div>
    </div>

    <div class="demo lists image_thumb">
            <ul>
              <li class="expand">Admin System
                <ul class="collapse">
                  <li class="active"> 

            <a href="../images/Intro-1.mov">
                <img src="../images/banner1_thumb.jpg" alt="video_1">
            </a>
            <div class="block">
                <h2>Video 1</h2>
                <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
            </div>
        </li>    
                  <li>
            <a href="../images/Intro-2.mov">
                <img src="../images/banner1_thumb.jpg" alt="video_2">
            </a>
            <div class="block">
                <h2>Video 2</h2>
                <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
            </div>
        </li>
                </ul>

              </li>
              <li class="expand">Enrollment System
                <ul class="collapse">
                  <li>
            <a href="../images/Intro-1.mov">
                <img src="../images/banner1_thumb.jpg" alt="video_3">
            </a>
            <div class="block">
                <h2>Video 3</h2>
                <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
            </div>
        </li>    

                  <li>
            <a href="video4.jpg">
                <img src="../images/banner1_thumb.jpg" alt="video_4">
            </a>
            <div class="block">
                <h2>Video 4</h2>
                <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
            </div>
        </li>
                </ul>
              </li>
              <li class="expand">Inventory System
                <ul class="collapse">

                  <li>
            <a href="video5.jpg">
                <img src="../images/banner1_thumb.jpg" alt="video_5">
            </a>
            <div class="block">
                <h2>Video 5</h2>
                <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
            </div>
        </li>

                  <li> 
            <a href="video6.jpg">
                <img src="../images/banner1_thumb.jpg" alt="video_6">
            </a>
            <div class="block">
                <h2>Video 6</h2>
                <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
            </div>
        </li>

                </ul>
              </li>
            </ul>    
        </div>
</div>  

Thanks fo开发者_如何转开发r any response.

I haven't worked with embedded objects, but I'm guessing that the browser doesn't respond to changes to the src attribute after it has been loaded.

No idea if this will work but try cloning the object, removing the existing one, changing the attributes on the cloned object, and then adding it back into the document.

Something like this:

var videoClone = $(".main_image object").clone()
   .find("embed").attr({src: imgTitle}).end()  
   .find("param:first").attr({value: imgTitle});
$(".main_image object").remove();
$(".main_image").append(videoClone);

try setting the Parameter wmode="transparent" and then do the z-index thing..