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 视频播放 的相关文章

  • Vue.JS 2.5.1:未捕获的语法错误:意外的令牌导出

    我试图使用 VueJS 和 Bootstrap Vue 制作一个单选按钮 但是当我制作它时发生了这种情况 我预计这是语法错误 就像它所说的那样 但我似乎找不到任何线索 所以我尝试复制粘贴代码 这是 test radio php 的完整代码
  • JavaScript 中的“new”关键字是什么?

    The newJavaScript 中的关键字第一次遇到时可能会很混乱 因为人们倾向于认为 JavaScript 不是面向对象的编程语言 它是什么 它解决什么问题 什么时候合适 什么时候不合适 它做了 5 件事 它创建一个新对象 这个对象的
  • 使用 jQuery / .data() 避免内存泄漏

    我正在使用 jQuery 动态创建 HTML 元素 现在需要针对它们存储 JavaScript 数据 但是 我现在担心内存泄漏 因为我实际上从未在对象上调用 删除 我 append 和 detach 它们 但从不 remove jQuery
  • 通过 jquery/javascript 在警报或确认对话框中单击“确定”?

    我正在考虑在backbone js 和jquery 中编写一些UI 测试 它们可能不是最好的方法 但这是我正在考虑的事情 通过纯代码自动化测试而无需记录和回放 使用这种方法唯一让我摸不着头脑的是 在某些 用例流程 执行的 中 会出现确认 警
  • javascript 和 PHP 中的正则表达式有什么区别吗?

    这是在 javascript 中验证电子邮件地址的正则表达式 我不确定是否可以直接在 PHP 中使用它 a z d u00A0 uD7FF uF900 uFDCF uFDF0 uFFEF a z d u00A0 uD7FF uF900 uF
  • 将数组转换为具有默认值的对象的更简洁方法? (洛达什可用)

    我有一个数组 比如说 a b c 我想将其转换为一个对象 该对象以数组值作为键和我可以设置的默认值 所以如果默认值是true 我希望我的输出是 a true b true c true 下面的代码是否有更简洁的版本来实现此目的 var my
  • jQuery 验证日期范围问题

    我的代码中有很多地方有成对的相关开始和结束日期字段 范围 我需要验证开始日期早于结束日期 我正在使用 jQuery 验证插件 这是我的代码 http jsfiddle net jinglesthula dESz2 http jsfiddle
  • Nodemailer:从未收到问候语

    当尝试使用 Nodemailer 在 Node 内发送电子邮件时 https github com nodemailer nodemailer https github com nodemailer nodemailer 调用sendMai
  • 单击输入字段会触发窗口调整大小

    我有一个带有徽标 菜单和搜索的标题 当我在桌面上时 我会按该顺序显示所有元素 但如果我的窗口宽度小于 980 像素 菜单会隐藏 有一个切换按钮 并且徽标会与nav并附在徽标之后 如果宽度更大 则徽标将再次分离并附加到 DOM 中的旧位置 w
  • 如何在一段特定时间后在后台运行 ajax 调用? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想在一段特定的时间后显示警报消息 您想继续吗 如果用户同意 则 ajax 调用必须在后台运行 否则取消 ajax 调用 那么请告诉我
  • TRACKER:错误TRK0005:无法找到:“CL.exe”。该系统找不到指定的文件

    我尝试在 Windows 8 上的 Node js 项目中执行以下命令 npm 安装 电子邮件受保护 cdn cgi l email protection 但我收到一个错误 我不知道如何处理 TRACKER 错误TRK0005 无法找到 C
  • 将 Google 电子表格解析为 Javascript 数组

    我有一个 Google 电子表格 https docs google com spreadsheets d e 2PACX 1vRc8Lx0N wf3f1xAAXkNFUqQjaWPFcde3YjK02gCBqGpUrULwHC6NC0sn
  • 离子旋转器未显示

    我用 http 请求填充 Ionic 集合重复列表 但我不想将所有内容直接加载到 DOM 中 因此 我只显示其中一些项目 并在您向下滚动时添加其余项目 为此我实现了无限滚动功能 当我到达页面底部时 它应该显示一个旋转器 但它没有 这些物品至
  • 如何将函数传递给 JavaScript Web Worker

    我想通过一个 或多个 函数传递postMessage 给网络工作者 因为我无法引用常规文件 为了启动 Web Worker 我将一个对象 URL 从 Blob 创建 传递给Worker构造函数 然后我传递一条消息 但到目前为止还没有在消息中
  • HTML 和 JavaScript - 将滚动操作从一个元素传递到另一个元素

    假设我有两个 div div div div A scrollable list div 我想让它当光标停在里面时 control并且鼠标滚轮滚动 view将会滚动 无论如何要实现这一目标 好的 快速修复对我有用 即使固定 div 不可滚动
  • 仅在首页加载时使用 cookie 加载 colorbox

    我尝试了来自网络的参考代码 仅在页面加载时加载特定元素一次 这是示例代码
  • 显示班级图片 10 秒

    我有下面给出的代码显示9 boxes 其值如下digital time 还有一个班级box002显示digits相当于随机选择的九个盒子的值 box002 can be dragged to digital time starting wi
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • 在 JSP 或 Javascript 中清除浏览器缓存中的图像

    我正在为一所大学开发JSP Web 应用程序 用户页面中显示人员图片 用户注销后如何从网络浏览器缓存中清除这张图片 使用 JSP 或 JavaScript 那是不可能的 最好的选择是完全禁用相关资源的缓存 创建一个filter https
  • 使用 JavaScript onclick 添加表格行

    我正在尝试使用 javascript 添加下面找到的完全相同的元素 我已经尝试了这里找到的所有解决方案 我什至尝试用php echo但没有运气 无需更改任何输入名称或类似内容 只需单击该按钮即可向表中添加另一行 仅此而已 这是该元素 tr

随机推荐

  • 在 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页面