Question

我制作了一个显示html5视频的模态图层。这很好用。单击关闭模式按钮后，我无法使视频停止播放。

当我关闭模态时，视频会继续在后台播放。任何人都可以帮忙，当我关闭模态层时，视频终止。

这是我的html代码，我使用Magnific Popup 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,

任何建议都会受到如此赞赏

Answer 1

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

关闭按钮单击停止模态视频

1 个答案: