在内联颜色框中加载mediaelementjs,暂停视频onClose

时间:2012-07-27 19:33:03

标签: javascript colorbox mediaelement.js mediaelement

尝试了一些事情并且无法实现这一点。我有一个内联视频元素,我正在加载到一个颜色框,然后将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();
            }
        });

1 个答案:

答案 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();
        }
    });