UPDATE: dynamisch ersetzen das src Attribut von Embed-Tag in JavaScript

Question

Wenn ich versuche, das Src Attribut von eingebettetem Film (Quicktime) zu ändern, funktioniert es seltsam lokal in Firefox, funktioniert aber nicht auf Server in Firefox, nicht Arbeit in Safari entweder lokal oder auf Server, und es funktioniert nicht in IE.

Ich versuche, was unten vorgeschlagen wurde:

$(".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 

Dies gilt nicht der Film überhaupt erscheinen. Alles wird geladen, aber Film. Wer weiß warum? Sicherlich kann ich nicht der Einzige sein, der etwas anderes als Flash benutzt, um Filme zu laden.

html (falls hilfreich):

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

Vielen Dank für jede Antwort.

Answer 1

Ich habe nicht mit eingebetteten Objekten gearbeitet, aber ich vermute, dass der Browser nicht auf Änderungen am src-Attribut reagiert, nachdem es geladen wurde.

Keine Ahnung, ob das funktioniert, aber versuchen Sie, das Objekt zu klonen, das vorhandene Objekt zu entfernen, die Attribute des geklonten Objekts zu ändern und es dann wieder in das Dokument einzufügen.

Etwas wie folgt aus:

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); 

Answer 2

versuchen, den Parameter wmode = "transparent" Einstellung und führen Sie dann die z-index Sache ..