mootools中的HTML5缓冲视频属性不起作用

Question

我目前在MooTools中实现HTML5缓冲视频属性时遇到问题。这是我目前所拥有的，它基于以下链接：Media Progress-Meter。检查页面源代码。

var SBar = new Class({
    Binds: ['progress'],

    initialize: function (video) {
        this.video = document.id(video);

        this.build();
        this.attach();
    },

    build: function () {
        this.element = new Element('div.seekbar');
        this.bufferbar = new Element('div.buffered');

        this.element.grab(
            this.bufferbar
        );
    },

    attach: function () {
        this.video.addEvent('loadedmetadata', this.progress);
        this.video.addEvent('progress', this.progress);
    },

    detach: function () {
        this.video.removeEvent('loadedmetadata', this.progress);
        this.video.removeEvent('progress', this.buffered);
    },

    progress: function () {

        /*
         * The following code is pretty much a MooTools adaption
         * of the code used for "Media Progress-Meter".
         *
         * http://jspro.brothercake.com/media-events/progress.html
         */

        //get the buffered ranges data
        var ranges = [];
        for (var i = 0; i < this.video.buffered.length; i++) {
            ranges.push([
                this.video.buffered.start(i),
                this.video.buffered.end(i)
            ]);
        }

        var spans = this.bufferbar.getChildren('span');

        while (spans.length < this.video.buffered.length) {
            this.bufferbar.grab(new Element('span'));
        }

        while (spans.length > this.video.buffered.length) {
            this.bufferbar.getChildren('span').getLast().dispose();
        }

        //now iterate through the ranges and convert each set of timings
        //to a percentage position and width for the corresponding span
        for (var i = 0; i < this.video.buffered.length; i ++) {
            spans[i].style.left = Math.round ((100 / this.video.duration) * ranges[i][0]) + '%';

            spans[i].style.width = Math.round ((100 / this.video.duration) * (ranges[i][1] - ranges[i][0])) + '%';
        }
    },

    toElement: function () {
        return this.element;
    }
});

这个类的重点是模仿时间范围规范，而不使用canvas元素来显示不同的范围。

问题：在Firefox中（还没有尝试过其他浏览器），它似乎创建了一个无限循环（崩溃我的浏览器）。如果有两个视频元素指向同一个源，则第二个视频的缓冲区不会显示。

我尝试了许多不同的解决方案以及使用'console.log'进行调试，但似乎都没有。