停止模式視頻點擊關閉按鈕

我做了一個模式圖層，顯示html5視頻。這工作正常。點擊關閉模式按鈕後，我無法停止播放視頻。停止模式視頻點擊關閉按鈕

當我關閉模式時，視頻在後臺繼續播放。任何人都可以幫助，所以當我關閉模態層，視頻終止。

這裏是我的html代碼，我用的是Magnific酒店的彈出JS的模式彈出

<div id="p1" class="mfp-hide"> 
    <div class="some-element"> 
    <video id="sampleMovie" width="100%" preload controls class="embed-responsive-item"> 
    <!-- .mp4 or .mov --> 
    <source src="videos/sample2.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
</video> 
</div> 
<button title="Close (Esc)" type="button" class="mfp-close">×</button> 
</div>

JS代碼 -

* Private static constants 
*/ 
var CLOSE_EVENT = 'Close', 
    BEFORE_CLOSE_EVENT = 'BeforeClose', 
    AFTER_CLOSE_EVENT = 'AfterClose', 
    BEFORE_APPEND_EVENT = 'BeforeAppend', 
    MARKUP_PARSE_EVENT = 'MarkupParse', 
    OPEN_EVENT = 'Open', 
    CHANGE_EVENT = 'Change', 
    NS = 'mfp', 
    EVENT_NS = '.' + NS, 
    READY_CLASS = 'mfp-ready', 
    REMOVING_CLASS = 'mfp-removing', 
    PREVENT_CLOSE_CLASS = 'mfp-prevent-close'; 


/** 

if(mfp.st.showCloseBtn) { 
      // Close button 
      if(!mfp.st.closeBtnInside) { 
       mfp.wrap.append(_getCloseBtn()); 
      } else { 
       _mfpOn(MARKUP_PARSE_EVENT, function(e, template, values, item) { 
        values.close_replaceWith = _getCloseBtn(item.type); 
       }); 
       _wrapClasses += ' mfp-close-btn-in'; 
      } 
     } 

if(mfp.st.showCloseBtn && 
     (!mfp.st.closeBtnInside || mfp.currTemplate[mfp.currItem.type] === true)) { 
      if(mfp.currTemplate.closeBtn) 
       mfp.currTemplate.closeBtn.detach(); 
     } 

appendContent: function(newContent, type) { 
     mfp.content = newContent; 

     if(newContent) { 
      if(mfp.st.showCloseBtn && mfp.st.closeBtnInside && 
       mfp.currTemplate[type] === true) { 
       // if there is no markup, we just append close button element inside 
       if(!mfp.content.find('.mfp-close').length) { 
        mfp.content.append(_getCloseBtn()); 
       } 
      } else { 
       mfp.content = newContent; 
      } 
     } else { 
      mfp.content = ''; 
     } 

     _mfpTrigger(BEFORE_APPEND_EVENT); 
     mfp.container.addClass('mfp-'+type+'-holder'); 

     mfp.contentContainer.append(mfp.content); 
    }, 

     closeBtnInside: true, 

     showCloseBtn: true,

任何建議，將如此讚賞

來源

2017-09-16 user3745738

請發佈到目前爲止你寫的完整的HTML/JS。請相應更新您的問題。 –

具體的相關代碼關閉模式 – Dekel

我已經添加了js代碼 - 我只能上傳它的一部分 - 我可以在按鈕上添加一個新功能來終止視頻嗎？ – user3745738

  <div id="p1" class="mfp-hide"> 
     <div class="some-element"> 
     <video id="sampleMovie" width="100%" preload controls class="embed-responsive-item"> 
     <!-- .mp4 or .mov --> 
     <source src="videos/sample2.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
     </video> 
     </div> 
     <button title="Close (Esc)" type="button" class="mfp-close">×</button> 
     </div> 

     <script> 
    var video = document.getElementById("myVideoPlayer"); 
function stopVid(){ 
     video.pause(); 
     video.currentTime = 0; 
} 

    //attach event handler to close button 

    $(".mfp-close").on('click', function(){ 
    stopVid(); 
    }); 
     </script>

來源

2017-09-16 20:18:44 Maxwell

停止模式視頻點擊關閉按鈕

回答

相關問題