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

回答

相關問題