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

SCRIPT438：Object不支持此属性或方法mediaelement-and-player.js，第3049行第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>
mediaelement.js