MediaElement.js + Reveal JQuery modal：如何在 × 上暂停视频/音频

发布于 2024-12-26 05:52:57 字数 2064 浏览 0 评论 0 原文

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

目前，单击播放按钮后，模态的左上角 ( 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 停止 HTML5 视频播放模态窗口关闭

...因此我们将不胜感激。我认为 MediaElement.js 或 Reveal.js 文件可能需要调整或其他什么？

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

原文

How do I simultaneously pause the player AND cause the the containing modal to slide up/away (to "un-reveal")?

Presently, after the play button is clicked, and the modal's upper-left (x)...the & #215;...is clicked...the modal slides away, but the video continues to play. To avoid this, the user must: 1) pause the video, and THEN 2) close the modal. I'd like a click or tap on any of the modal's triggers--for instance, clicking the (x)--to do both actions at the same time. I'm trying to find a solution that will work across platforms / devices.

Here's what I got so far, which is not working...

IN HEAD OF DOM BETWEEN SCRIPT TAGS

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

TRIGGER TO REVEAL MODAL

   <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&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">×</a>
   </div>

Already tried many other solutions, including...

Javascript to stop HTML5 video playback on modal window close

...so any help is appreciated. I think it's possible either the MediaElement.js or Reveal.js file may need to be tweaked or something?

Incidentally, clicking anywhere outside of the modal--i.e., on the "gloss"--causes it to slide up/away; hitting the escape key on the keyboard does the same. Clicking anywhere on the video player causes it to pause. Would love it if all of these functions are retained along with tapping on mobile devices. (Haven't tested that yet.)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

恰似旧人归 2025-01-02 05:52:57

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

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

回复收藏 0 原文

汹涌人海 2025-01-02 05:52:57

用这个脚本解决了这个问题...

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

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

Got it solved with this script...

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

There were multiple MediaElement.js vids on each page (one for each potential modal)...each vid being identified with the same id="player2" attribute...which was also keeping the page from validating. Tried switching that in my original script from getElementByID to getElementByName...didn't work. Created a class in lieu of an ID for each player...that didn't work. Irregardless of the validation issues: the above solution--simply inserting the .close-reveal-modal class directly into the "stop all" script for MediaElement.js works great. (Thanks @Fabrizio for suggesting I examine my ID attributes to begin with...)

回复收藏 0 原文

~没有更多了~