Question

如何使用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>

感谢。

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

Answer 2

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

<!-- 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，或者根据浏览器支持选择要包含的内容。 ACCORDING-＆GT; http://dimsemenov.com/plugins/magnific-popup/documentation.html

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

然后JS：

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

有关详细信息，请参阅我上面几行

的链接

Answer 3

这对我来说很棒。在自动启动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

带有html5视频的Magnific Popup

3 个答案: