2010-11-22 31 views
0

当我尝试更改嵌入式电影(quicktime)的src属性时,它在Firefox中本地工作奇怪,但在Firefox中无法在服务器上工作,在Safari中在本地或服务器上工作,并且在IE中不起作用。更新:动态替换JavaScript中的嵌入标签的src属性

我尝试什么以下建议:

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

这并不让影片出现在所有。一切都得到加载,但电影。有人知道为什么当然,我不能成为唯一使用闪光灯以外的东西加载电影的人。

HTML(如果有用):

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

感谢任何回应。

回答

0

我没有使用嵌入式对象,但我猜测,浏览器没有响应加载后的src属性的更改。

不知道这是否可行,但尝试克隆该对象,删除现有对象,更改克隆对象上的属性,然后将其添加回文档中。

事情是这样的:

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

它没有工作。电影本身现在不会在页面上加载。在我最初的问题中,我更新了它。 – JohnMerlino 2010-11-22 17:59:32

+0

将div放入电影是唯一的解决方案。您无法动态更改JavaScript中嵌入标记的src属性。有一个新问题。虽然我有一个菜单,它应该放在它的前面,但是电影在页面中的所有内容上都是分层次的。 – JohnMerlino 2010-11-22 20:07:31

+0

试过设置菜单的z-index?例如。到100. – 2010-11-23 00:06:44

0

尝试设置参数的wmode = “透明”,然后做z-index的事情..