我可以使用 magnific-popup 显示 MP4 视频吗？

Posted 2023-05-08

【中文标题】我可以使用 magnific-popup 显示 MP4 视频吗？

【英文标题】：Can I use magnific-popup to display an MP4 video?

【发布时间】：2014-01-26 01:30:11

【问题描述】：

我想使用 magnifico-popup 来显示本地托管的 mp4 文件。

我需要为此定义一个 iframe 模式还是有更简单的选项。

非常感谢您的意见

安妮塔

【参考方案1】：

您需要集成一些第三方视频播放器，例如http://mediaelementjs.com/

我建议使用inline 类型的弹出窗口，因为它允许您在弹出窗口中打开任何 html 代码。 http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline-type

相关示例：http://codepen.io/dimsemenov/pen/GtjBb

【讨论】：

感谢 Dmitry 的回答，我为您的解决方案苦苦挣扎了几个小时，我建议他们在 Magnific 弹出窗口的 open() 回调中调用 mediaelement 插件，以使其正常工作。

@AdanArchila 尝试使用回调初始化 MediaElement： open: function() - 不工作。你能分享你的代码吗？那很好啊。谢谢！

@Ihor-paspar2.com 我无法在 cmets 中粘贴代码，所以我只是分叉了 Dmitry codepen 并修改了回调，请只检查 javascript 不是一个工作示例，我只是想要粘贴我的 javascript codepen.io/adan/pen/gpjwVw

@AdanArchila 感谢您的代码，它对正确的 js 代码有所了解。另一个问题 - 您打开 Magnific 的 .open-popup-link 是否链接到 mp4？什么作为内联内容传递给 Magnific - 只是 url 或完整的 标签？

在我的项目中，我传递了一个 div 的 ID，这个 div 看起来像这样：

【参考方案2】：

您可以使用内容类型 - iframe 打开 MP4 视频：

<a class="mfp-iframe" href="MP4_VIDEO_PATH">Open MP4 video in iframe</a>