javascript - MediaElement.js + 显示 JQuery 模态 : how to pause video/audio on <a ="close-reveal-modal">&#215;</a>

Question

我如何同时暂停播放器并使包含模态向上/滑动(“取消显示”)？

目前，点击播放按钮后，模态框的左上角 (x)...×...被点击...模态框滑开，但视频继续播放。为避免这种情况，用户必须: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 文件或其他什么？

顺便说一句，点击模态框外的任何地方——即“gloss”——会导致它向上/向外滑动；按键盘上的转义键也一样。单击视频播放器的任意位置会导致其暂停。如果保留所有这些功能以及在移动设备上点击，我会很高兴的。 (还没有测试过。)

Answer 1

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

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