在内联颜色框中加载mediaelementjs，在关闭时暂停视频

loading mediaelementjs in an inline colorbox, pause video onClose

本文关键字：视频暂停加载颜色 mediaelementjs 更新时间：2024-05-04

尝试了一些事情，但无法实现。我有一个内联视频元素，我正在加载到一个颜色框中，然后将mediaelementjs应用到它。

问题是，当我关闭彩色盒子时，电影一直在播放。我无法在成功功能之外访问该播放器，例如在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();
            }
        });

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