Question

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

目前，点击播放按钮后，模态的左上角（x）...＆amp; ＃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>

VIDEO + MODAL CONTAINER

   <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 ready事件上移动这些说明

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的“stop all”脚本中就可以了。（感谢@Fabrizio建议我先检查我的ID属性......）

MediaElement.js +显示JQuery模式：如何暂停视频/音频<a =“close-reveal-modal”>×</a =“close-reveal-modal”>

2 个答案: