Question

尝试将mediaelement.js播放器合并到灯箱（fancybox.net）中。

播放器在没有FancyBox的IE中工作。 FancyBox在IE中使用常规文本内容。但播放器+ fancybox一起在IE中不起作用（效果很好在所有其他浏览器中）。

只是测试页面上的玩家：http://ways-means.channeltree.com/index3.html

测试页上灯箱内的播放器：http://ways-means.channeltree.com/index4.html

还尝试通过iframe提取内容（与上面相同的测试域，但使用index5.html）

整天都在绞尽脑汁，这可能是我失踪的小/傻事，但不确定是什么。

感谢任何帮助 - 谢谢！

Answer 1

我在寻找解决方案时来到这里。在我找到自己的解决方案之前，我没有找到任何东西。这是它，仅供参考。我希望它有所帮助。

$('.open-fancybox').fancybox({
    'afterShow': function() {
        $('#mediaelement').mediaelementplayer();
    }
});

<a class="open-fancybox" href="#fancybox">
<div id="#fancybox">
    <video id="#mediaelement" src="...mp4">
</div>

Answer 2

我最近遇到了与您在项目中遇到的问题相同的问题。在我的例子中，fancybox在模态窗口中正确加载了mediaelement播放器。然而，在IE8上，呈现了flash播放器，然后您可以看到控件被剥离并且从未被替换过。

在看了一下插件之后，似乎mediaelement会监听flash播放器触发的事件，以初始化播放器的控件。根据许多情况，我发现玩家在调用插件之前发出了该事件，这意味着该插件从未确定玩家是否准备就绪。

对我来说，修复是将flashName选项显式设置为swf的路径。然后，我只是从我的源中删除了对象标记，允许插件创建它。

明确设置swf的路径：

    <script>
    $(document).ready(function(){
      $('video').mediaelementplayer( {
      flashName: '/path_to_mediaelement_swf/flashmediaelement.swf',
      });
   });
  </script>

视频来源：

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">
    <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
    <source type="video/mp4" src="myvideo.mp4" />
    <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
    <source type="video/webm" src="myvideo.webm" />
    <!-- Ogg/Vorbis for older Firefox and Opera versions -->
    <source type="video/ogg" src="myvideo.ogv" />
    <!-- Optional: Add subtitles for each language -->
    <track kind="subtitles" src="subtitles.srt" srclang="en" />
    <!-- Optional: Add chapters -->
    <track kind="chapters" src="chapters.srt" srclang="en" /> 
    <!-- Allow the plugin to generate the object markup, preventing the swf source from loading too early  -->

</video>

希望这有帮助！

Answer 3

我刚刚遇到了同样的问题，如果你在显示的div中有na（flash播放器），那么事实证明它比IE 7/8更好：没有flash播放器不能正确加载视频。

对我来说，修复是将div显示为div，并使用jquery隐藏所有具有.hidden_video类的div。

执行此操作后，视频会在fancybox中正确加载。

FancyBox + MediaElement播放器+ IE

3 个答案: