Mediaelement.js 彩盒中的MediaElementPlayer

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

SCRIPT438:对象不支持此属性或方法 mediaelement-and-player.js，第3049行字符4

以防万一你想知道冒犯的界线是什么

delete t.node.player;

显然，当我试图处理MediaElementPlayer实例时，IE8不喜欢它。我已经检查过了，Flash正在成功加载和播放视频。我尝试使用Fiddler2来捕捉流量并找出问题所在，但它没有显示任何内容。在这个简化的示例代码中，我在video元素的源元素中设置了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>

var-player=null；
$（“.cbox”）.colorbox({
是的，
滚动：false，
onOpen：函数（）{
},
onComplete:函数（）{
var cboxLink=$（此值）；
player=new MediaElementPlayer（cboxLink.attr（“href”）{
alwaysShowControls:对，
特点：[“播放暂停”、“进度”、“音量”]，
插件：['flash']，
pluginPath:“//s3.amazonaws.com/base folder/scripts/mediaelement/”，
flashName:'flashmediaelement.swf'，
成功：函数（mediaElement、domObject）{
控制台日志（“已加载”）；
}
});
var width=cboxLink.attr（“宽度”）；
var height=cboxLink.attr（“高度”）；
$.fn.colorbox.resize（{innerWidth:width，innerHeight:height}）；
},
onCleanup:function（）{
player.pause（）；
player.remove（）；
}
});