2010-11-22 3 views
0

포함 된 동영상 (퀵타임)의 src 특성을 변경하려고하면 이상하게도 Firefox에서 로컬로 작동하지만 파이어 폭스에서는 서버에서 작동하지 않습니다. Safari에서 로컬 또는 서버에서 작동하며 IE에서는 작동하지 않습니다.업데이트 : JavaScript에서 embed 태그의 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

+0

div에 동영상을 배치하는 것이 유일한 해결책이었습니다. JavaScript에서 embed 태그의 src 속성을 동적으로 변경할 수 없습니다. 새로운 문제가 있습니다. 이 영화는 앞에있는 애니메이션 메뉴가 있지만 페이지의 다른 모든 부분 위에 겹쳐 있습니다. – JohnMerlino

+0

메뉴의 z- 인덱스를 설정하려고 시도 했습니까? 예 : –

0

는 "투명"매개 변수 W 모드 = 설정을 시도하고 Z- 인덱스의 일을 ..

관련 문제