使用html5视频的Magnific Popup

如何使用magnific-popup从我的服务器检索并弹出html5视频，而不是从YouTube，vimo，...获取视频？使用html5视频的Magnific Popup

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

谢谢。

来源

2014-10-08 Anas Aldrees

我有这个使用为纽带的工作之后打开视频：

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

，然后用I帧类型，以显示它：

$('.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中打开视频，但我还没有弄清楚如何改变诸如高度和宽度之类的东西。我仍然在学习这些东西，所以我不知道它是如何工作的，我只知道它把视频放在屏幕上。如果你得到它的工作，并建立一个更复杂的版本，请让我知道，所以我可以提高我的版本。

来源

2014-10-09 10:18:39 jakecfc1992

感谢几行的链接，我会发布任何更新这里如果我找到了解决方案。 – 2014-10-10 12:42:30

谢谢。运作良好。 – 2017-02-08 05:24:37

我认为你应该先检查基础知识：
- 如果路径插件是正确的，正确包含它不是必需的

<!-- 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->http://dimsemenov.com/plugins/magnific-popup/documentation.html

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

然后JS：

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

欲了解更多信息，请参阅我的推杆上面

来源

2016-12-08 00:46:16

使用html5视频的Magnific Popup

回答

相关问题