いくつかのことを試しましたが、これを機能させることができません。カラーボックスにロードし、mediaelementjs を適用するインライン ビデオ要素があります。カラーボックスの 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&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();
}
});