Question

我正在尝试在一个网站上使用MediaElement.js，但是在IE浏览器中，一切都很好用，尤其是IE9（我现在不太关心IE9以下的支持）。我正在动态填充ME，我读过这可能会导致IE中出现问题，但我不确定是否有解决方法。我这样做的原因是因为这是一个投资组合网站，所有项目数据都通过getJSON调用加载，一旦加载，所有项目都会填充适当的数据并动态创建。有几个视频项目。我把代码愚蠢到了我的项目之外的一个例子，它基本上经历了同样的行为。如果我只是在JS中编写HTML并控制它可以工作但是当我通过JS创建HTML然后尝试播放时我得到错误日志（在代码中创建ME播放器）。这是代码：

$(function() {
            var details = {
                    width: 640,
                    height: 480,
                    src: 'work/television/1'
                },
                $body = $('body'),
                $vid = $('<video width="' + details.width + '" height="' + details.height + '" preload="none" id="vidPlayer1"></video>'),
                $mp4 = $('<source src="' + details.src + '.mp4" type="video/mp4" title="mp4">'),
                $webm = $('<source src="' + details.src + '.webm" type="video/webm" title="webm">'),
                $ogg = $('<source src="' + details.src + '.ogv" type="video/ogg" title="ogg">'),
                $flash = $('<object width="' + details.width + '" height="' + details.height + '" type="application/x-shockwave-flash" data="swf/flashmediaelement.swf"><param name="movie" value="swf/flashmediaelement.swf"><param name="flashvars" value="controls=true&file=' + details.src + '.mp4"></object>'),
                $error = $('<p>The available video formats are not supported by your browser. :(</p>'),
                $controls = $('<div class="videoControls playBtn"></div>');

            $body.append($controls);

            $vid.append($mp4);
            $vid.append($webm);
            $vid.append($ogg);
            $vid.append($flash);
            $vid.insertAfter($controls);

            var vidPlayer = new MediaElementPlayer('#vidPlayer1', {
                features: [],
                // mode: 'shim',
                pluginPath: 'swf/',
                success: function(mediaElement) {
                    console.log('success', mediaElement);
                },
                error: function() {
                    console.log('Error loading player.  Please try again.');
                }
            });

            $body.on('click', function(evt) {
                vidPlayer.play();
            });
        });

非常感谢任何帮助。

Answer 1

问题解决了。对于任何感兴趣的人，必须将我的追加组合成一个电话，所以$ vid成为：

$vid = $('<video width="' + details.width + '" height="' + details.height + '" preload="none" id="vidPlayer-' + row + '-' + slide + '"><source src="' + details.src + '.mp4" type="video/mp4" title="mp4"><source src="' + details.src + '.webm" type="video/webm" title="webm"><source src="' + details.src + '.ogv" type="video/ogg" title="ogg"><p>The available video formats are not supported by your browser. :(</p></video>')

只需将其全部放在一个语句中，IE9就能正确识别它。问题是通过附加，因为我做的源变量从未被附加，因此IE不知道我的视频源是什么。

希望这有助于将来。

MediaElement.js动态内容在IE9中不起作用

1 个答案: