Question

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

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

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

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

Answer 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();

Answer 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>

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

希望这有帮助。

Answer 3

除了用于初始化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周围的函数中。

此答案基于a post的Matt Bergsma。

Answer 4

您可以像下面的代码一样编写

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

player.pause();

player.play();

Answer 5

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

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

如何获取已存在的MediaElementPlayer

5 个答案: