2011-10-20 2 views
1

javascript에서 퀵타임 동영상을 제어하는 ​​데 문제가 있습니다. <video> HTML5 요소를 사용하여 HTML 페이지에 비디오를 임베드합니다. 브라우저에서 지원하지 않으면 (예 : IE 8) ("플래시가 없음"이라는 특정 요구 사항이 있지만 퀵타임은 허용됩니다) HTML5 요소를 사용합니다. 비디오가 팝업으로 표시됩니다. 팝업이 닫히면 비디오 재생을 중지하고 싶습니다. HTML5에서이 작업을 성공적으로 수행 할 수 있지만 퀵타임 컨트롤이 작동하지 않습니다.IE에서 JavaScript에서 QuickTime 동영상 제어가 작동하지 않습니다.

<video width="360" height="298" autobuffer="autobuffer" controls="controls" id="video" tabindex="0"> 
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="/data/mmg-demo.mp4"></source> 
    <source type="video/ogg" src="/data/mmg-demo.ogv"></source> 
    <object width="360" height="298" id="videoem" codebase="http://www.apple.com/qtactivex/qtplugin.cab" classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b"> 
     <param value="/data/mmg-demo.mp4" name="src"> 
     <param value="false" name="autoplay"> 
     <param value="true" name="controller"> 
     <embed width="360" height="298" name="videoem" pluginspage="http://www.apple.com/quicktime/download/" loop="false" controller="true" autoplay="false" src="../files/380/380523/video.mp4"> 
    </object> 
</video> 

팝업 닫기과 같습니다 자바 스크립트 함수 :

내 HTML은 다음과 같습니다 나는 파이어 폭스에서이 동일한 퀵타임 코드를 테스트 한

function closePopup { 
    //stop html5 playback if it's there 
    if(typeof document.getElementById('video').pause == 'function') { 
     document.getElementById('video').pause(); 
    } 
    //stop playback of quicktime embed if it's there 
    if(document.getElementById('videoem')) { 
     document.getElementById('videoem').SetRate(0.0); 
    } 
    $('#demo-video').fadeOut(); 
} 

- 그것은 작동 벌금. 또한 작동하도록 주장하는 다른 포럼의 예는 IE 8에서 작동하지 않습니다 (예 : http://lists.apple.com/archives/quicktime-api/2008/Mar/msg00187.html 참조 - IE 8에서는 작동하지 않음).

라인 document.getElementById('videoem').SetRate(0.0)으로 인해 Object does not support this property or method 오류가 발생합니다.

어디에서 볼 것인지 잘 모르겠습니다. 어떤 도움이라도 대단히 감사합니다.

답변

1

좋아, 내가 알아 냈다고 생각해. 트릭은 <object> 요소가 아닌 <embed> 요소의 ID를 사용하는 것입니다. 그래서 내가 가진 최종 (작업) 코드는 이것입니다.

HTML :

<div id="mkt-video" style="position:fixed;width:360px;background-color:black;padding:10px;border:solid 2px white;display:none;z-index:100003"> 
    <video id="video" width="360" height="298" controls="controls" autobuffer="autobuffer"> 
     <source src="/data/mmg-demo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
     <source src="/data/mmg-demo.ogv" type="video/ogg" /> 
     <object classid='clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b' width="360" height="298" codebase='http://www.apple.com/qtactivex/qtplugin.cab' id="videoem-object"> 
      <param name='src' value="/data/mmg-demo.mp4" /> 
      <param name='autoplay' value="false" /> 
      <param name='controller' value="true" /> 
      <param name="enablejavascript" value="true" /> 
      <embed src="../files/380/380523/video.mp4" width="360" height="298" autoplay="false" controller="true" loop="false" pluginspage='http://www.apple.com/quicktime/download/' name="videoem" id="videoem"></embed> 
     </object> 
    </video> 
</div> 

그리고 자바 스크립트 :

IE9는 여전히 삽입 객체를 생성하지만, 이상한 형태의 일부 이상한 오류가 발생하기 때문에 "시도 - 캐치"가 필요합니다

function closeVideo() { 
    if(typeof document.getElementById('video').pause == 'function') { 
     document.getElementById('video').pause(); 
    } 
    try { 
     document.getElementById('videoem-object').SetRate(0.0); 
    } 
    catch (err) {} 
    $('#mkt-video').fadeOut(); 
} 
함유량. 어쨌든 이제는 잘 작동합니다.

관련 문제