MediaElement.js 知道播放器何时全屏答案

【问题标题】：MediaElement.js knowing when player goes fullscreenMediaElement.js 知道播放器何时全屏
【发布时间】：2012-02-13 17:39:55
【问题描述】：

每次播放器进入全屏（或从全屏退出）时我都需要检查，换句话说，我需要在触发全屏方法时监听自定义事件，以便我可以在下面做其他事情。

【问题讨论】：

我也想知道这个问题的答案。当 mediaelement 进入 flash 全屏模式时，它会破坏控件。我想尝试修复它们。

标签： mediaelement.js

【解决方案1】：

您需要在初始化 MediaElement 之前添加这段代码：

MediaElementPlayer.prototype.enterFullScreen_org = MediaElementPlayer.prototype.enterFullScreen;
MediaElementPlayer.prototype.enterFullScreen = function() {
    // Your code here
    this.enterFullScreen_org();
}
MediaElementPlayer.prototype.exitFullScreen_org = MediaElementPlayer.prototype.exitFullScreen;
MediaElementPlayer.prototype.exitFullScreen = function() {
    // Your code here
    this.exitFullScreen_org();
}

【讨论】：

我会通过添加类似“this.dispatchEvent('enterfullscreen');”的方式将此脚本作为原始脚本的附加组件。而不是纯代码。这样，它可以像任何其他事件一样处理，而不会弄脏您的代码。当然，最好的做法是从 repo 中分叉并进行实际实施！

【解决方案2】：

实际上，在打开全屏模式时会发送一个"enteredfullscreen"event。但是，此事件不是在mediaElement 上调度，而是在player 上调度。

您可以在启动播放器后附加事件监听器：

var myPlayer = new MediaElementPlayer("#video", options);

myPlayer.container.addEventListener(
    "enteredfullscreen",
    // your callback function goes here
    false
);

或使用success 回调函数（只需添加player 作为第三个参数）：

var myPlayer = new MediaElementPlayer("#video", {
    // your options
    success: function(mediaElement, domObject, player) {
        player.container.addEventListener("enteredfullscreen", yourCallbackFunction)
    }
});

【讨论】：

【解决方案3】：

我也试图找到解决这个问题的方法。我的解决方案是观察 Mediaelement 播放器对象的 isFullScreen 属性是否有变化。

示例代码：

...
var mejsFullScreen;
new MediaElementPlayer('#video', {
    pluginPath: 'lib/mediaelement/',
    flashName: 'flashmediaelement.swf',
    success: function(mediaElement, DOMElement, player) {
        mejsFullScreen= mediaElement.isFullScreen;
        setInterval(function() {
            if (mediaElement.isFullScreen != mejsFullScreen) {
                if (mediaElement.isFullScreen) {
                    // do something on enter fullScreen
                    mejsFullScreen = mediaElement.isFullScreen;
                } else {
                    // do something on leave fullScreen
                    mejsFullScreen = mediaElement.isFullScreen;
                }
             }
         }, 500);
    }
});

【讨论】：