javascript - 在内联颜色框中加载 mediaelementjs，暂停视频 onClose

Question

尝试了一些事情，但无法使其正常工作。我有一个内联视频元素，我将其加载到颜色框中，然后将 mediaelementjs 应用到它。我在颜色框 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();
        }
    });