JavaScript 在模态窗口关闭时停止 HTML5 视频播放

2024-04-23

我在模态窗口上有一个 html5 视频元素。当我关闭窗口时,视频继续播放。我是 JS 的新手。有没有一种简单的方法将视频播放停止功能与窗口关闭按钮绑定?下面是我的html页面:

<!DOCTYPE html >
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Modal Test</title>

<script type="text/javascript" src="jquery.js">

</script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#showSimpleModal").click(function() {
            $("div#simpleModal").addClass("show");
            return false;   
        });

        $("#closeSimple").click(function() {
            $("div#simpleModal").removeClass("show");
            return false;                   
        });
    });
</script>

<style type="text/css">

div#simpleModal
{
    position:absolute; 
    top: 40px; 
    width: 320px; 
    left: 170px; 
    border: solid 1px #bbb;     
    padding: 20px; 
    background: #fff; 
    -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25); 
    opacity: 0.0; 
    -webkit-transition: opacity 0.0s ease-out; z-index: 0;
}

div#simpleModal.show
{
    opacity: 1.0; 
    z-index: 100;        
    -webkit-transition-duration: 0.25s; 
}

</style>
</head>
<body>

<a href="" id="showSimpleModal">Show Modal</a>

<div id="simpleModal" class="modal">
<video width="320"  height="240" src="Davis_5109iPadFig3.m4v" controls="controls"> </video>
<a href="" id="closeSimple">Close</a>
</div>
</body>
</html>

任何意见都非常感谢。

Thanks.


我正在使用以下技巧来停止 HTML5 视频。在模态关闭时暂停()视频并设置 currentTime = 0;

<script>
     var video = document.getElementById("myVideoPlayer");
     function stopVideo(){
          video.pause();
          video.currentTime = 0;
     }
</script>

现在您可以使用 stopVideo() 方法来停止 HTML5 视频。喜欢,

$("#stop").on('click', function(){
    stopVideo();
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript 在模态窗口关闭时停止 HTML5 视频播放 的相关文章

随机推荐

  • 在 OAuth2.0 中使用 Facebook 访问令牌作为资源所有者凭据

    OAuth 2 0 规范定义了资源所有者密码凭证授予类型 https datatracker ietf org doc html draft ietf oauth v2 26 section 4 3 它允许直接使用资源所有者密码凭据 即用户
  • JSch get() 失败并出现 NullPointerException

    我有一个 Jax RS 服务器 它应该保存可通过 ssh 访问的文件列表 然后我可以通过 HTTP 下载或流式传输 我一直在尝试使用 JSch 的 SFTP 通道读取文件 但我不断收到NullPointerException 这是Messa
  • 如何在 C++ 中前向声明 std::set?

    为了加快编译过程 我正在尝试简化我的头文件MyClass hpp通过前向声明 STL 容器 例如 std vector std set But std set can NOT在以下代码中进行前向声明 同时std vector can be
  • 在地图函数中迭代应用 ggplot 函数

    我想为数据集中的所有变量生成一系列直方图 但显然我没有正确准备数据以便在地图函数中使用 library tidyverse mtcars gt select wt disp hp gt map function x ggplot aes x
  • 仅在特定服务器上调用delayed_job capistrano任务

    我有一个专门的服务器用于delayed job 任务 我想启动 停止和重新启动delayed job工作人员only这个服务器 我正在使用delayed job提供的capistrano食谱 当我只有 1 台服务器时 这是我的配置 befo
  • 仍然无法针对带有 Salat / Casbah 的 Play FakeApp 运行多个测试

    我以为我已经修好了问题 https stackoverflow com questions 12028218 running multiple tests within the same fakeapplication in play 2
  • 为什么 receive_boot_completed 在我的设备上不起作用?

    我正在开发一些需要使用的应用程序receive boot completed重新启动以重置一些警报 它可以在模拟器和 Samsung tab 2 10 1 上正常工作 但它不能在我的 android 版本 2 2 1 的 Galaxy Mi
  • jQuery/javascript 用户单击和以编程方式单击复选框的不同行为

    有点难以解释 所以我设置了一个 jsFiddlehere http jsfiddle net BCECy 基本上 当用户单击复选框时 我会触发一些行为 在另一个地方 我尝试以编程方式单击复选框 我需要看到完全相同的行为 它不起作用 似乎与单
  • Vim 中每行末尾的美元符号(“$”)是什么

    我对 Vim 还比较陌生 每当我启动 Vim 时使用vim LearnRuby rb 每行都会出现一个美元符号 Why set nolist 将关闭当前缓冲区的特殊字符 例如制表符显示为 I和行尾字符显示为 然而 如果它在你跑步时始终如一地
  • .hgignore 语法仅忽略文件,而不忽略目录?

    我有一个我似乎无法理解的问题 我在 Windows 上使用 TortoiseHg 版本 0 7 5 但在 Linux 上我遇到了同样的问题 这里是 My hgignore file syntax regexp 我想要实现的是将 hg 存储库
  • PHP - UPLOAD_ERR_NO_TMP_DIR

    我正在使用 Cbeyond www cbeyond com 你们中的一些人可能熟悉它们 作为启用 PHP 的虚拟主机 当我检查如下时 我的 PHP 上传功能遇到问题 error FILES uploadedfile error echo e
  • Graphql 字段在类型上不存在

    浏览完 Graphql 的文档后 我开始在一个玩具 Rails reactJS 项目上实现它 这些项目允许用户通过设备登录 然后访问显示艺术家列表的虚拟 艺术家路径 一切似乎都工作正常 直到我尝试使用 React 应用程序中的 GraphQ
  • 对象动画师不删除更新监听器android

    美好的一天 我有一个场景 这个半正常的对象动画师不断地反复触发 导致堆增长 当然在某些时候还会出现内存不足问题 这是如何进行的 我为这样的彩虹动画制作了静态方法 public static ObjectAnimator startRainb
  • Spring @Transactional 和 Hibernate @LockMode 注释如何关联

    我想知道事务和锁之间的关系 更具体地说 Spring 的情况如何 Transactional与Hibernate的LockMode有关 https docs jboss org hibernate orm 4 0 devguide en U
  • 绘制java类的依赖关系图

    嘿嘿 我正在寻找像 JDepend 这样的工具来为 java 类文件绘制图表 JDepend 看起来很好 但它没有从 deps 中解析 deps 也许我只是缺少一些特殊选项 直接输出为 dot 格式或图像会很好 谢谢 你可以试试Java依赖
  • 使用 JavaScript 命名空间是否存在任何危险?

    创建 JavaScript 命名空间时是否有任何危险 警告应该注意 我们的项目相当庞大 我们正在运行大量 JavaScript 文件 超过 20 个 预计还会更多 如果不使用命名空间 就不可能实现任何代码可维护性 因此我们像这样实现它们 v
  • 如何只在当前行进行搜索和替换?

    I see 如何在特定行中搜索和替换 https stackoverflow com questions 17319557 search and replace in vim in specific lines 按行号指定 以及如何使用当前
  • 按升序/降序快速对 data.table 进行排序

    我有一个大约有 300 万行和 40 列的 data table 我想按组内的降序对该表进行排序 如以下 sql 模拟代码 sort by ascending Year ascending MemberID descending Month
  • 为什么 C# 和 C 中 `j= ++i + ++i;` 的输出不同?

    int i 1 j j i i printf d j 该程序的输出是6但是当我对 C 使用相同的逻辑时 输出是5 我想知道为什么相同的逻辑在两种不同的语言中表现不同的原因 C 中的规则是 严格从左到右评估每个子表达式 所以 j i i is
  • JavaScript 在模态窗口关闭时停止 HTML5 视频播放

    我在模态窗口上有一个 html5 视频元素 当我关闭窗口时 视频继续播放 我是 JS 的新手 有没有一种简单的方法将视频播放停止功能与窗口关闭按钮绑定 下面是我的html页面