1

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

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

以防万一您想知道违规行是什么...

delete t.node.player;

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

0 回答 0