尝试了一些事情并且无法实现这一点。我有一个内联视频元素,我正在加载到一个颜色框,然后将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&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();
}
});
答案 0 :(得分:0)
为此,您可能需要在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();
}
});