0

我有一系列页面，每个页面都显示一组视频。一种视频播放列表，如果你愿意的话。为了便于处理每个视频，我在它们上运行 mediaelement.js 插件并将 mediaElement 对象存储在一个数组中，如下所示：

var mediaArray = [];
$(".class").each(function (index) {
    $(this).mediaelementplayer({
        success: function (mediaElement, domObject) {
            mediaArray[index] = mediaElement;
        }
    });
});

这非常适合让我在 mediaelement.js 播放器之外控制各种 mediaElement 对象。因此，例如，我可以让用户单击下一个视频的标题以切换到播放该视频。

我遇到麻烦的地方是当我尝试允许用户更改其中一个视频的音量，然后在他们开始播放下一个视频时保持该音量。

我可以轻松编写这样的函数：

    setAllVolume = function (value) {
        for (var i=0, il=mediaArray.length; i<il; i++) {
            mediaArray[i].setVolume(value);
        }
    }

如果我在 mediaelement.js 控件之外有音量控制，那效果很好。（例如，如果我为通用音量控制构建 jQueryUI 滑块。）

我尝试的是为“changevolume”事件添加一个事件侦听器，并setAllVolume像这样触发我的函数：

$(".class").each(function (index) {
    $(this).mediaelementplayer({
        success: function (mediaElement, domObject) {
            mediaArray[index] = mediaElement;
            mediaElement.addEventListener("volumechange", function () {
                setAllVolume(mediaElement.volume);
            });
});

正如您可能想象的那样，以这种方式设置音量会导致每个 mediaElement 触发其自己的“volumechange”事件，并setAllVolume在级联失败堆中递归调用该函数，这会导致浏览器在一次又一次地搅动整个过程时挂起。

那么，有没有一种方法可以改变一个视频的音量，反映在其他视频中，而不会遇到这种递归？（我应该提到我使用的是 H.264 视频，而这个问题似乎只发生在使用 Flash 插件播放该格式的浏览器中。）

4

1 回答 1

0

我认为解决我的问题的最快方法是检查在循环遍历数组时存储的 mediaElement 的当前卷：

setAllVolume = function (value) {
    for (var i=0, il=mediaArray.length; i<il; i++) {
        if (mediaArray[i].volume !== value) {
            mediaArray[i].setVolume(value);
        }
    }
}
于 2013-02-06T17:04:35.923 回答