UPDATE: remplace dynamiquement l'attribut src de la balise embed en JavaScript

Question

Lorsque j'essaie de changer l'attribut src du film incorporé (quicktime), il fonctionne étrangement localement dans Firefox, mais ne fonctionne pas sur le serveur dans firefox, ne fonctionne pas travailler dans Safari localement ou sur le serveur, et cela ne fonctionne pas dans IE.

J'essaie ce qui a été suggéré ci-dessous:

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

Cela ne rend pas le film semble du tout. Tout est chargé mais film. Quelqu'un sait pourquoi? Sûrement, je ne peux pas être le seul à utiliser autre chose que le flash pour charger des films.

html (si utile):

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

Merci pour toute réponse.

Answer 1

Je n'ai pas travaillé avec des objets incorporés, mais je suppose que le navigateur ne répond pas aux modifications de l'attribut src après son chargement.

Aucune idée si cela fonctionnera, mais essayez de cloner l'objet, en supprimant l'objet existant, en modifiant les attributs de l'objet cloné, puis en l'ajoutant dans le document.

Quelque chose comme ceci:

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

Régler le paramètre wmode = "transparent", puis faire la chose z-index ..