인라인 컬러 박스에 미디어 요소를로드하고 비디오를 닫으십시오.

Question

몇 가지 시도를 해 보았습니다. 나는 인라인 비디오 요소를 colorbox에로드하고 media 요소를 적용합니다. 나는 colorBox onOpen 이벤트에서 미디어 요소를 실행하고 있습니다.

문제는 색상 상자를 닫을 때 동영상이 계속 재생된다는 것입니다. onCleanup 또는 onClose와 같이 success 함수 외부에서 해당 플레이어에 액세스 할 수 없습니다.

가 여기에 비디오가 앉아 HTML입니다 :

<div class="hidden"> 
    <div id="trailer-wrap"> 
     <video id="trailer" src="...video source..." type="video/mp4" controls="controls" width="720" height="480" preload="none"> 

      <object width="720" height="405" type="application/x-shockwave-flash" data="path/to/flashmediaelement.swf"> 
       <param name="movie" value="path/to/flashmediaelement.swf" /> 
       <param name="flashvars" value="controls=true&amp;file=...video source..." /> 
       <img src="poster.jpg" alt="No video playback capabilities" /> 
      </object> 
     </video>  
    </div> 
</div> 

을 여기에 아래 스크립트입니다 :이를 위해

$(".cbox-trigger").colorbox({ 
     inline:true, 
     innerWidth:"720px", 
     innerHeight:"480px", 
      scrolling:false, 
      onOpen: function(){ 

       var player = new MediaElementPlayer('#trailer', { 
        success: function (mediaElement, domObject) { 
         // call the play method 
         mediaElement.play(); 
        } 
       }); 
       $.fn.colorbox.resize(); 
      }, 
      onCleanup: function(){ 
       [how to access player object here?].pause(); 
      } 
     }); 

Answer 1

, 당신은 다음, colorbox 블록의 player 변수 외부를 정의 사용해야 할 수 있습니다 onCleanup 콜백의이 변수

var player = null; 
$(".cbox-trigger").colorbox({ 
    inline:true, 
    innerWidth:"720px", 
    innerHeight:"480px", 
     scrolling:false, 
     onOpen: function(){ 

      player = new MediaElementPlayer('#trailer', { 
       success: function (mediaElement, domObject) { 
        // call the play method 
        mediaElement.play(); 
       } 
      }); 
      $.fn.colorbox.resize(); 
     }, 
     onCleanup: function(){ 
      player.pause(); 
     } 
    });