Colorbox中的MediaElementPlayer

Question

无论我尝试过什么，我都无法让MediaElementPlayer在Colorbox中运行。到目前为止，我所做的最好的事情就是让它在Chrome和IE9中运行。我只有mp4文件可以使用，所以目前我没有在FF测试。如果我在IE8（标准模式）中尝试，视频将在我第一次点击Colorbox链接时加载并播放以激活它，但我看不到控制按钮。但是，它确实可以成功播放和暂停。我的光标变成了围绕视频中心的指针，因此控件可能存在，但出于某种原因隐藏了。当我关闭Colorbox模式并重新打开它时，真正的问题出现了。模态打开，但它是空的 - 没有视频加载。如果我此时尝试关闭Colorbox模式，IE控制台会给我以下错误：

SCRIPT438：Object不支持此属性或方法 mediaelement-and-player.js，line 3049 character 4

万一你想知道违规行是什么......

delete t.node.player;

显然IE8当我尝试处理MediaElementPlayer实例时不喜欢它。我已经检查过，Flash正在成功加载并播放视频。我尝试使用Fiddler2来捕获流量并找出问题，但它没有显示任何内容。在这个简化的示例代码中，我在视频元素的source元素中设置了src属性，但我不能在prod代码中执行此操作。为什么？因为IE完全忽略了“preload ='none'”属性，并且由于IE9可以播放它们，所以当页面加载时它们都会加载。有时会有很多视频，所以我不能拥有它。我有一个在单击Colorbox链接时在运行时加载源的工作示例，但是这会遇到与此相同的问题。我需要能够在不重新加载页面的情况下多次打开视频。每个视频似乎只加载和播放一次（减去控件），然后再次加载。请查看我的代码，看看我能做些什么来解决这个问题：

<div id="all-container">
    <div id="cbox-links">
        <a href="#video0" width="360px" height="203px" class="cbox cboxElement">Video 1</a><br>
        <a href="#video1" width="720px" height="405px" class="cbox cboxElement">Video 2</a><br>
    </div>
    <div id="mep-container">
        <div class="hidden">
            <video id="video0" width="360" height="203">
                <source src="//s3.amazonaws.com/path-to-video/big_buck_bunny.mp4" type="video/mp4">
            </video>
        </div>
        <div class="hidden">
            <video id="video1" width="720" height="405">
                <source src="//s3.amazonaws.com/path-to-video/larger_video.mp4" type="video/mp4">
            </video>
        </div>
    </div>
</div>

这是我的剧本：

<script>
    var player = null;
    $(".cbox").colorbox({
        inline: true,
        scrolling: false,
        onOpen: function () {

        },
        onComplete: function () {
            var cboxLink = $(this);

            player = new MediaElementPlayer(cboxLink.attr("href"), {
                alwaysShowControls: true,
                features: [ "playpause", "progress", "volume" ],
                plugins: ['flash'],
                pluginPath: '//s3.amazonaws.com/base-folder/scripts/mediaelement/',
                flashName: 'flashmediaelement.swf',
                success: function (mediaElement, domObject) {
                    console.log("loaded");
                }
            });

            var width  = cboxLink.attr("width");
            var height = cboxLink.attr("height");
            $.fn.colorbox.resize({innerWidth: width, innerHeight: height});
        },
        onCleanup: function () {
            player.pause();
            player.remove();
        }
    });
</script>