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

Posted 2023-05-07

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

【英文标题】：MediaElement.js + Reveal JQuery modal: how to pause video/audio on <a="close-reveal-modal">&#215;</a>

【发布时间】：2012-02-07 14:01:45

【问题描述】：

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

目前，在单击播放按钮后，模态的左上角 (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   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   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"    
        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 文件或其他什么？

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

【参考方案1】：

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

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

【讨论】：

感谢您的回答...但是，无论出于何种原因，将脚本重新定位到 ID = 'pauseX' 元素在 DOM 中第一次出现之后的某个位置...这似乎不是帮助。有道理……

你能提供一个演示页面吗？

别笑，好吗？ blogblimp.com/anydevice/anywhere/portfolio.html 点击任何图中的设备。 （模态中的视频只是一个占位符。） PS：Mosaiqy...哇。

【参考方案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 属性...）

【讨论】：

我想知道为什么 $('video, audio').each 工作正常但 $('.myvideos').each 不起作用？有什么想法吗？