关闭 replete modal 后视频的音频继续播放

Question

试图为此找到解决方案，但找不到任何有效的方法。我试过了

$('video').trigger('pause');

并且 html 中没有关闭按钮可以附加任何脚本。但是，我不知道 jquery 或 javascript 所以我希望有人能帮忙。

使用 'Replete Modal' 这似乎很受欢迎，但如果在完整观看之前关闭模态，视频的音轨会继续播放，我会遇到问题。似乎只有在桌面浏览器上查看时才会出现问题。

希望找到一个也能停止音频的解决方案。

下面是我插入的 HTML 代码：

<div style="margin:50 auto; width:700px;">
  <a class="vimeo" >vimeo</a>
  <script>
   $(window).load( function(){
    rplm({
     title: "ETSA Teacher Training",
     text: '<video width="100%" height="338" controls autoplay><source src="Endeavour Teaching.mp4" type="video/mp4"><!--source src="movie.ogg" type="video/ogg"-->Your browser does not support the video tag.</video>',
     html: true,
     showConfirmButton: true,
     delay: 2,
     animation: 'fadeIn',
     allowOutsideClick: true,
     overlay: "black",
     videoHeight: "338",
     videoWidth: "100%",
  preventDialog: true,
  cookieName: "blockModal",
  preventText: "Block This Pop-up.",
  preventDays: 30,
  modalNOverlay: 'black',
    });
   });
  </script>
 </div>

您可以在此处查看实际效果：http://www.endeavourtsa.org/index-test3.html 显然有 css 和 js 文件，但由于我不知道需要哪一部分，所以我不想 post 此处的所有代码，除非迫不得已。如果需要，我可以 post 或者你可以在这里找到文件： http://www.endeavourtsa.org/modal.zip

非常感谢任何帮助！

Answer 1

查看源代码，您需要在弹出窗口中为视频添加视频 ID，以便稍后参考 (id="evideo")

rplm({
    title: "ETSA Teacher Training",
    text: '<video id="evideo" width="100%" height="338" controls autoplay><source src="Endeavour Teaching.mp4" type="video/mp4"><!--source src="movie.ogg" type="video/ogg"-->Your browser does not support the video tag.</video>',

然后将 onclick 处理程序添加到关闭弹出窗口的按钮（除非 rplm 有一个事件模型，允许您更轻松地将代码附加到弹出窗口的 close 事件):

        modalNOverlay: 'black',
        });
        document.getElementsByClassName("confirm")[0].addEventListener("click",function(){alert('boo')})
    });
</script>

（可能需要一些调整和其他事件，因为也可以通过在框外单击来关闭模态，但需要查看 rplm 文档以查看是否有更优雅的解决方案）

关闭 replete modal 后视频的音频继续播放

Video's audio continues to play after replete modal is closed

html

javascript

jquery

video-streaming

html5-video