FancyBox + MediaElement 播放器 + IE

发布于 2024-10-17 21:28:13 字数 574 浏览 0 评论 0原文

尝试将 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）

一整天都在绞尽脑汁，它可能是我错过的一些小/愚蠢的东西，但不确定是什么。

如有任何帮助，我们将不胜感激 - 谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哀由 2024-10-24 21:28:13

我是在寻找解决方案时来到这里的。我什么也没找到，直到我自己找到解决方案。在这里，仅供参考。我希望它能帮助某人。

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

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

I got here while looking for a solution. I did not find anything until I found a solution by myself. Here it is, just for info. I hope it helps someone.

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

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

回复收藏 0 原文

荆棘i 2024-10-24 21:28:13

我最近在一个项目中遇到了和你一样的问题。就我而言，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>

希望这有帮助！

I recently encountered the same problem as you did on a project. In my case, fancybox properly loaded the mediaelement player in the modal window. However, on IE8, the flash player was presented and you could then see the controls get stripped away and never replaced.

After looking at the plugin a bit more, it seems mediaelement listens for an event fired by the flash player in order to initialize the controls for the player. Depending on a number of circumstances, I was finding that the player was emitting that event BEFORE the plugin was called, which meant that the plugin never determined the player to be ready.

The fix for me was to explicitly set the flashName option to the path of the swf. Then, I simply removed object markup from my source, allowing the plugin to create it.

Explicitly setting the path to the swf:

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

Video source:

<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>

Hope this helps!

回复收藏 0 原文