带有 html5 视频的宏伟弹出窗口答案

【问题标题】：Magnific Popup with html5 video带有 html5 视频的宏伟弹出窗口
【发布时间】：2014-10-08 08:38:53
【问题描述】：

如何使用 magnific-popup 从我的服务器检索和弹出 html5 视频，而不是从 youtube、vimo 等获取视频？

<video width="500" height="350" controls>
    <source src="/static/video/bunny.mp4" type="video/mp4" />
        Your browser does not support this video format.
</video>

谢谢。

【问题讨论】：

标签： magnific-popup

【解决方案1】：

我已经使用以下链接作为打开视频的链接：

<a class="popup-player" href="/static/video/bunny.mp4">
 video link
</a>

然后使用iframe类型来显示：

$('.popup-player').magnificPopup({
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 160,
    preloader: false,
    fixedContentPos: false,
    iframe: {
        markup: '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
              '</div>',

        srcAction: 'iframe_src',
        }
});

这是一个非常基本的版本，它在 iframe 中打开视频，但我还没有弄清楚如何更改高度和宽度等内容。我还在学习这些东西，所以我不知道它是如何工作的，我只知道它会在屏幕上放一个视频。如果你让它工作并构建一个更复杂的版本，请告诉我，以便我改进我的版本。

【讨论】：

谢谢，如果我找到解决方案，我会在这里发布任何更新。

【解决方案2】：

这对我很有用。使用带有自动启动 HTML5 视频的“内联”类型。

Javascript：

$('.openVideo').magnificPopup({
type: 'inline',
callbacks: {
  open: function() {
    $('html').css('margin-right', 0);
    // Play video on open:
    $(this.content).find('video')[0].play();
    },
  close: function() {
    // Reset video on close:
    $(this.content).find('video')[0].load();
    }
  }
});

HTML：

<a href="#video-01" class="openVideo">
<div id="video-01" class="video-popup mfp-hide">
    <video preload="false" poster="/videos/01.png">
        <source src="/videos/01.mp4" type="video/mp4">
    </video>
</div>

原文来源：https://github.com/dimsemenov/Magnific-Popup/issues/626

【讨论】：

【解决方案3】：

我认为你应该先检查基础知识：
- 如果插件的路径正确且包含正确

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><br />

<!-- Magnific Popup core JS file --><br />
<script src="magnific-popup/jquery.magnific-popup.js"></script>

这不是必需的，但我们建议将 CSS 文件放在 <head> 中，并将 JavaScript 文件和初始化代码放在您网站的页脚中（在结束 </body> 标记之前）。如果您的网站上已经有jquery.js，请不要再次包含它，或者使用jQuery.noConflict(); 模式。或者，您可以包含 Zepto.js 而不是 jQuery，或者根据浏览器支持选择要包含的一个。根据->http://dimsemenov.com/plugins/magnific-popup/documentation.html

-如果您的服务器上有电影并且它的路径是否正确。
/ 用于进入文件夹

然后是JS：

$(document).ready(function() { $('.image-link').magnificPopup({type:'image'}); });

有关更多信息，请参阅我在上面放几行的链接

【讨论】：