Question

我有一系列页面，每个页面都显示一组视频。一种视频播放列表，如果你愿意的话。为了便于处理每个视频，我在它们上运行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插件播放该格式的浏览器中。）

Answer 1

我认为我的问题最快的解决方案是在我循环访问数组时检查存储的mediaElement的当前音量：

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

mediaelement.js在多个视频中同步音量

1 个答案: