Gruntjs Mediaelement.js无限循环

这已经有好几天了。重现问题的最简单方法是使用Yeoman并调用

yo webapp

。安装完成后，运行

bower安装mediaelement--保存
。在索引页上抛出视频：

    <div class="hero-unit">
      <h1>'Allo, 'Allo!</h1>
      <p>You now have</p>
      <ul>
        <li>HTML5 Boilerplate</li>

      </ul>
        <video src="bower_components/mediaelement/media/echo-hereweare.mp4" controls></video>
    </div>

我仍然不知道是否使用bower/grunt让事情进展起来与此有关，但我可以让它在其他情况下工作

更新
我已经更改了这个问题的名称，以反映我在下面找到的答案。它曾经被称为“Mediaelement.js无限循环，当使用bower实现并使用grunt时”
答案总是令人沮丧的简单。使用mediaelement和player.js取决于附带的css文件。那个档案不仅仅是为了好看。它设置某些元素的宽度，如果没有这些宽度，用于计算playhead曲目宽度的js函数将失败

所以一定要包括
mediaelementplayer.css
或缩小版。即使像我一样，你不关心播放器的外观，因为你后来添加了自己的风格。
值得一提的是，即将发布的mediaelement.js将为像我这样的傻瓜解决这个问题。
    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/mediaelement/build/mediaelement-and-player.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    setControlsSize: function() {
        var t = this,
            usedWidth = 0,
            railWidth = 0,
            rail = t.controls.find('.mejs-time-rail'),
            total = t.controls.find('.mejs-time-total'),
            current = t.controls.find('.mejs-time-current'),
            loaded = t.controls.find('.mejs-time-loaded'),
            others = rail.siblings(),
            lastControl = others.last(),
            lastControlPosition;


        // allow the size to come from custom CSS
        if (t.options && !t.options.autosizeProgress) {
            // Also, frontends devs can be more flexible
            // due the opportunity of absolute positioning.
            railWidth = parseInt(rail.css('width'));
        }

        // attempt to autosize
        if (railWidth === 0 || !railWidth) {

            // find the size of all the other controls besides the rail
            others.each(function() {
                var $this = $(this);
                if ($this.css('position') != 'absolute' && $this.is(':visible')) {
                    usedWidth += $(this).outerWidth(true);
                }
            });

            // fit the rail into the remaining space
            railWidth = t.controls.width() - usedWidth - (rail.outerWidth(true) - rail.width());
        }

        // resize the rail,
        // but then check if the last control (say, the fullscreen button) got pushed down
        // this often happens when zoomed
        do {                
            // outer area
            rail.width(railWidth);
            // dark space
            total.width(railWidth - (total.outerWidth(true) - total.width()));              

            lastControlPosition = lastControl.position();

            railWidth--;                
        } while (lastControlPosition.top > 0)

        if (t.setProgressRail)
            t.setProgressRail();
        if (t.setCurrentRail)
            t.setCurrentRail();
    },