如何获取已经存在的 MediaElementPlayer答案

【问题标题】：How to get an already existing MediaElementPlayer如何获取已经存在的 MediaElementPlayer
【发布时间】：2011-08-01 08:15:49
【问题描述】：

在我的页面上，我使用$('#video-id').medialementplayer(options) 为<video> 元素创建了一个MediaElementPlayer。该元素被隐藏（使用display: none）并使用jQuery UI 变成一个模态对话框。

我正在尝试绑定此对话框上的打开/关闭事件以启动/暂停播放器。处理$(...).dialog(options) 的脚本与处理$(...).medialementplayer(options) 的脚本是分开的，并且无权访问创建的MediaElementPlayer。

如果我纯粹使用 HTML5 视频元素，我可以使用 $('video', dialogContentElement).get(O) 检索 播放器，但由于我使用的是 MediaElement.js，因此我不能依赖此方法来检索实际播放器。

MediaElement.js 是否提供了一种方法来检索 <video> 或 <audio> 元素的现有 MediaElementPlayer（或 MediaElement）实例？还是我必须管理自己的播放器注册表？

【问题讨论】：

标签： mediaelement.js

【解决方案1】：

我无法让播放器以“新 MediaElementPlayer”的方式工作（只有 jQuery 方式对我有效），所以我设计了这个 hack，依赖于库将播放器添加到 mejs.players 数组的事实：

$('#my-video-id').
    mediaelementplayer(myopts).
    data('MEP',mejs.players[mejs.players.length-1]);

// ...

$('#my-video-id').data('MEP').play();

只要您一个一个地创建播放器（每次都在一个只有一个元素的 jQuery 对象上），它就可以工作。或者你可能会冒这样的风险（未经测试）：

var n = mejs.players.length;

$(myselector).mediaelementplayer(myopts).each(function(k,elt){

    $(elt).data('MEP',mejs.players[n+k]);
});

// ...

$('#my-video-id').data('MEP').pause();

【讨论】：

奇怪的是我无法获得 mejs.players.length，它以未定义的形式返回。我遇到了同样的问题，我发现无法获取已经存在的播放器的实例。

【解决方案2】：

我已经删除了下面示例中的其他一些代码，但这基本上是我们使用 mediaelements.js 的方式。它允许我们在视频播放器初始化后控制它。

这就是我们所做的：

var videoPlayer;

$(function () {
    var whatever = $('#videoPlayer').mediaelementplayer({
        success: function (player, node) {
            videoPlayer = player;
        }
    });
});

然后我们以编程方式将视频设置为基本上使用以下内容播放：

var vidArray = [{ src: "/media/vid.mp4", type: 'video/mp4' }];
videoPlayer.setSrc(vidArray);
videoPlayer.play();

videoPlayer 让我们可以访问视频播放器来播放、暂停、更改等。

然而，让我们感到困惑的是，除非 HTML 标记有源元素，否则它不起作用。没有它，我们会看到各种奇怪的错误。例如：

<video id="videoPlayer" width="100%" height="100%">
    <source src="/media/default.mp4" type="video/mp4" />
</video>

以此为基础，您应该可以完全控制视频播放器。

希望这会有所帮助。

【讨论】：

【解决方案3】：

您可以使用类 mejs__container 的 div 的 id 加载播放器，然后使用该 div 的 id 从 msjs.players 加载播放器。

var id = $(".mejs__container").attr('id');
var me_player = mejs.players[id];
me_player.play();

【讨论】：

【解决方案4】：

除了直接初始化 MediaElement 的 JQuery 函数外，您还可以将 ME 初始化为 var，以便您稍后使用 the API。

var player = new MediaElementPlayer('video',
   {defaultVideoWidth:960, defaultVideoHeight:410,
    features: ['playpause', 'progress', 'current', 'duration', 'volume', 'fullscreen'],
    success: function (mediaElement, domObject) { ... }
   });

// then bind the modal window's open and close callback function to the API:
// code below from the JQuery UI documentation at **http://docs.jquery.com/UI/Dialog**

$( ".selector" ).dialog({
    open: function(event, ui) { player.play(); },
    close: function (event, ui) { player.pause(); }
});

由于 .dialog(options) 脚本与 MediaElement 脚本是分开的，因此您应该确保 var player 是全局的，或者被适当地传递到 .dialog() init 周围的函数中。

此答案基于来自Matt Bergsma 的a post。

【讨论】：

【解决方案5】：

你可以像下面这样写

var player = new MediaElementPlayer('#player');

player.pause();

player.play();

【讨论】：