在内嵌的colorbox中加载mediaelementjs，暂停视频onClose

Question

尝试了几件事，无法使其工作。我有一个内嵌的视频元素，我将其加载到一个colorbox中，然后将mediaelementjs应用到它。我在colorbox onOpen事件上发射mediaelement。

问题是，这部电影一直当我关闭颜色框打。我无法在成功函数之外访问该播放器，如onCleanup或onClose。

这里就是视频坐在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

为此，您可能需要定义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(); 
     } 
    });