MediaElement.js + Reveal JQuery modal：如何在 <a="close-reveal-modal">×</a> 上暂停视频/音频

Question

如何同时暂停播放器并导致包含模式向上/滑开（以“取消显示”）？

目前，在单击播放按钮后，模态的左上角 (x)...& #215;...被单击...模态滑开，但视频继续播放。为避免这种情况，用户必须：1）暂停视频，然后 2）关闭模式。我想单击或点击任何模式的触发器——例如，单击 (x)——以同时执行这两个操作。我正在尝试找到一种可以跨平台/设备运行的解决方案。

这是我到目前为止得到的，但它不起作用......

在脚本标签之间的 DOM 头部

      document.getElementById("pauseX").onclick = function () {
      document.getElementById('player2').pause();
      };

触发显示模式

   <a href="#" data-reveal-id="vid-1">Click here to reveal modal.</a>

视频+模态容器

   <div id="vid-1" class="reveal-modal">
       <div class="center">
           <video width="480" height="270" id="player2" poster="../media/vid-1.jpg" controls="controls" preload="none">
               <source type="video/mp4" src="../media/vid-1-480x320.mp4" />
               <source type="video/webm" src="../media/vid-1-640x480.webm" />
               <object width="480" height="270" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">         
                   <param name="movie" value="../build/flashmediaelement.swf" /> 
                   <param name="flashvars" value="controls=true&amp;file=../media/vid-1-480x320.mp4" />         
                   <img src="../media/vid-1.jpg" width="480" height="270" alt="Vid 1" 
        title="No video playback. Update browser, enable Javascript, or install Flash." />
               </object>    
           </video>
          </div>
          <a id="pauseX" class="close-reveal-modal">&#215;</a>
   </div>

已经尝试了许多其他解决方案，包括...

Javascript to stop HTML5 video playback on modal window close

...所以任何帮助表示赞赏。我认为可能需要调整 MediaElement.js 或 Reveal.js 文件或其他什么？

顺便说一句，单击模态框以外的任何位置（即，在“光泽度”上）会导致它向上/滑开；按键盘上的退出键也是如此。单击视频播放器上的任意位置会使其暂停。如果所有这些功能都保留在移动设备上，我会很高兴的。 （还没有测试过。）

Answer 1

如果您的文档顶部有document.getElementById("pauseX").onclick...，则代码可能不起作用，因为id 为pauseX 的元素尚未在dom 上。查看javascript控制台，您应该会看到一些相关的错误

尝试将这些说明移到底部或 DOM 就绪事件上

Answer 2

用这个脚本解决了...

<script>
    $('.close-reveal-modal').click(function() {
        $('video, audio').each(function() {
            $(this)[0].player.pause();        
        });
    });
</script>

每个页面上有多个 MediaElement.js 视频（每个潜在模式一个）...每个视频都被标识为相同的 id="player2" 属性...这也使页面无法验证。尝试在我的原始脚本中将其从 getElementByID 切换到 getElementByName ...没有用。为每个玩家创建了一个类来代替 ID... 不起作用。不管验证问题如何：上述解决方案——只需将 .close-reveal-modal 类直接插入到 MediaElement.js 的“全部停止”脚本中就可以了。 （感谢@Fabrizio 建议我首先检查我的 ID 属性...）