首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在计时器上显示当前视频时间(小时:分钟:秒)

在计时器上显示当前视频时间(小时:分钟:秒)是一种常见的功能需求,可以通过以下步骤实现:

  1. 首先,需要获取视频的总时长和当前播放时间。可以使用HTML5的video标签来加载视频,并通过JavaScript来获取这些信息。具体步骤如下:
    • 在HTML文件中,添加一个video标签,并设置视频的src属性为视频文件的URL。
    • 使用JavaScript获取video元素,并通过video对象的duration属性获取视频的总时长(以秒为单位)。
    • 使用video对象的currentTime属性获取当前视频的播放时间(以秒为单位)。
  • 接下来,将获取到的总时长和当前播放时间转换为小时、分钟和秒的格式。可以使用JavaScript的Date对象和相关方法来进行转换。具体步骤如下:
    • 创建一个新的Date对象,并将其初始化为当前时间。
    • 使用Date对象的setHours、setMinutes和setSeconds方法,将其小时、分钟和秒分别设置为视频的总时长和当前播放时间对应的值。
    • 使用Date对象的getHours、getMinutes和getSeconds方法,分别获取视频的总时长和当前播放时间的小时、分钟和秒的值。
  • 最后,将转换后的小时、分钟和秒的值显示在计时器上。可以使用JavaScript的DOM操作来实现。具体步骤如下:
    • 在HTML文件中,添加一个用于显示时间的元素,例如一个div标签。
    • 使用JavaScript获取该元素,并将转换后的小时、分钟和秒的值设置为该元素的文本内容。

综上所述,实现在计时器上显示当前视频时间的功能,需要使用HTML5的video标签、JavaScript的Date对象和DOM操作。以下是一个示例代码:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
  <title>显示当前视频时间</title>
</head>
<body>
  <video id="myVideo" src="video.mp4"></video>
  <div id="timer"></div>

  <script>
    var video = document.getElementById("myVideo");
    var timer = document.getElementById("timer");

    video.addEventListener("timeupdate", function() {
      var duration = video.duration;
      var currentTime = video.currentTime;

      var durationDate = new Date();
      durationDate.setHours(0, 0, duration);
      var currentDateTime = new Date();
      currentDateTime.setHours(0, 0, currentTime);

      var durationHours = durationDate.getHours();
      var durationMinutes = durationDate.getMinutes();
      var durationSeconds = durationDate.getSeconds();

      var currentHours = currentDateTime.getHours();
      var currentMinutes = currentDateTime.getMinutes();
      var currentSeconds = currentDateTime.getSeconds();

      timer.textContent = formatTime(currentHours) + ":" + formatTime(currentMinutes) + ":" + formatTime(currentSeconds) + " / " + formatTime(durationHours) + ":" + formatTime(durationMinutes) + ":" + formatTime(durationSeconds);
    });

    function formatTime(time) {
      return time < 10 ? "0" + time : time;
    }
  </script>
</body>
</html>

在上述示例代码中,video标签的src属性被设置为"video.mp4",你可以将其替换为你自己的视频文件的URL。计时器的显示格式为"当前时间 / 总时长",例如"00:01:23 / 00:05:00"。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用 JavaScript 创建一个兔年春节倒数计时器

我们要运行倒计时的当前时间和特定时间,必须手动添加计时器倒计时,JavaScript 的new Date()用于捕获当前时间。...new Date ()是一种 JavaScript 方法,从设备获取当前时间。 如何在 JavaScript 中构建倒数计时器 早些时候我分享了各种简单的倒数计时器的设计。...这里基本做了4个盒子。一天中的时间小时分钟将分别显示在这些框中。...正如我之前所说,当前时间将首先使用此处的new Date()从你的设备获取。然后将从当前时间中减去你输入的时间值。 然后,该时间将以天、小时分钟的形式表示。...最后,使用innerHTML,它们显示在网页。然后用setInterval每秒更新一次这个时间

2K31

实战|仅用18行JavaScript构建一个倒数计时器

const total = Date.parse(endtime) - Date.parse(new Date()); 4.将时间转换为可用格式 现在我们要将毫秒转换为天,小时分钟。...这是因为你需要完整的秒数,而不是几分之一:Math.floor((t/1000)%60) 重复此逻辑,将毫秒转换为分钟小时和天。...6.页面上显示时钟,并在时钟为零时停止时钟 现在我们有了一个可以吐出剩余天数、小时分钟和秒数的函数,我们就可以建立我们的时钟了。...例如,不是让时钟显示 7 ,而是显示 07 。一种简单的方法是一个数的开头加上一串“0”,然后切掉最后两个数字。...8.2 从用户到达起将计时器设置为 10 分钟 用户到达或开始特定任务后,有必要在给定的时间内设置倒计时。我们将在此处将计时器设置为 10 分钟,但是你可以使用任意时间

4.1K41

使用VBAPowerPoint中创建倒计时器(续)附示例PPT下载

示例中,存储的当前时间是00:00:00,添加30时间后,则变为00:00:30。...,例如,如果是30计时器,并且10后转到下一张幻灯片,则该幻灯片中的计时器应从20开始恢复倒计时。...= DateAdd("s", -10, time) End Sub 如果有一个2分钟的倒计时器,它会显示02:00到00:00。...然而,可以编辑代码,通过将格式更改为”ss”只显示,但此时会注意到倒计时器只是从60开始,到00结束,并再次重复!这是因为”ss”格式不能显示超过60。...当倒计时器恢复时,通过将Now()加上剩余时间更新未来时间。 同样,也可以使用VBA代码PowerPoint中制作显示增加的时间的“计时器”。

1.2K40

你也能写的计时器程序

这个函数的作用是显示计时器时间计时器时间公式:当前时间 - 初始时间 - 暂停时间,这里关键的一步就是要计算暂停时间。所以,我们还需要两个类属性 self...._restart_time,分别表示暂停计时器那一刻的时间和再次启动计时器那一刻的时间,两个时间相减就得到总共暂停的时间。每当计时器暂停一次,self....函数,为自定义的函数,把得到的单位为时间转换成小时分钟三个部分,并返回格式化的字符串。...# 将时间表示为小时分钟的形式 # 返回格式化字符串 def convert(raw_time): hour = int(raw_time // 3600) minute = int..._current_time 相当于 time.time() 也就是当前时间。如果第一次启动或者清零后的启动,就要初始化计时器启动时间 self._start_time。

1.8K20

仅用18行JavaScript构建一个倒数计时器

二、基本的倒计时器:能倒数到特定的日期或时间 以下是创建基本的倒计时器所涉及步骤的快速概述: 设置有效的结束日期。 计算剩余时间。 将时间转换为可用格式。 将时钟数据输出为可重复使用的对象。...将时间转换为可用格式 现在,我们要将毫秒转换为天,小时分钟。...这是因为我们需要完整的秒数,而不是几分之一:Math.floor( (t/1000) % 60 ); 重复此逻辑,将毫秒转换为分钟小时和天。 4....页面上显示时钟,并在时钟为零时停止时钟 现在,我们有了一个可以花费剩余的天,小时分钟的功能,我们可以构建时钟了。...+ t.seconds).slice(-2); 如果需要,我们也可以分钟小时中添加前导零。

2.9K10

C#实现一个简易的基于时间轮调度的延迟任务

当添加一个新任务的时候,输入需要延迟的秒数,就会将任务插入到延迟多少对应的插槽内,当计时器启动的时候,每一跳刚好1,那么就会对插槽计数+1,然后去寻找当前插槽是否有任务,有的话就会调用ExecuteTask...其实就是增加分钟插槽数组,举个例子我有一个任务需要2分40后执行,那么当我插入到时间轮的时候我先插入到分钟插槽,当计时器每过去60分钟插槽值+1,当分钟插槽对应有任务的时候就将这些任务从分钟插槽里弹出再入队到插槽中...,这样一个任务会先进入插槽值=2(假设从0开始计算)的分钟插槽,计时器运行120分钟值从0累加到2,2插槽的任务弹出到插槽值=40的插槽里,当计时器再运行40,刚好就可以执行这个延迟2分40的任务...+时间轮延迟任务核心功能就这些了,聪明的你一定知道如何扩展增加小时,天,月份甚至年份的时间轮了。...虽然从代码逻辑可以实现,但是大部分情况下我们使用时间轮仅仅是完成一些内存易失性的非核心的任务延迟调度,实现天,周,月年意义不是很大。所以基本上到小时就差不多了。再多就上作业系统来调度吧。

28220

C# 基于时间轮调度的延迟任务实现

当添加一个新任务的时候,输入需要延迟的秒数,就会将任务插入到延迟多少对应的插槽内,当计时器启动的时候,每一跳刚好1,那么就会对插槽计数+1,然后去寻找当前插槽是否有任务,有的话就会调用ExecuteTask...其实就是增加分钟插槽数组,举个例子我有一个任务需要2分40后执行,那么当我插入到时间轮的时候我先插入到分钟插槽,当计时器每过去60分钟插槽值+1,当分钟插槽对应有任务的时候就将这些任务从分钟插槽里弹出再入队到插槽中...,这样一个任务会先进入插槽值=2(假设从0开始计算)的分钟插槽,计时器运行120分钟值从0累加到2,2插槽的任务弹出到插槽值=40的插槽里,当计时器再运行40,刚好就可以执行这个延迟2分40的任务...+时间轮延迟任务核心功能就这些了,聪明的你一定知道如何扩展增加小时,天,月份甚至年份的时间轮了。...虽然从代码逻辑可以实现,但是大部分情况下我们使用时间轮仅仅是完成一些内存易失性的非核心的任务延迟调度,实现天,周,月年意义不是很大。所以基本上到小时就差不多了。再多就上作业系统来调度吧。

13610

MatLab函数ylabel、ylim、yticks、yticklabels、ytickformat

3.2 语法 yticks(ticks) % 设置 y 轴显示刻度值的位置(ticks 为递增值向量,若设为 [] 则删除当前 y 轴刻度线) yt = yticks % 以向量形式返回当前 y 轴刻度值...%g\x00B0 ‘percentage’ 值后显示百分号 %g%% ‘auto’ 默认格式 %g 日期和时间格式 datefmt :'auto' | 字符向量 | 字符串标量(默认格式基于数据)...说明 z 时区偏移量的缩写名称 Z ISO 8601 基本格式(带有小时分钟和可选的字段) ZZZZ 长 UTC 格式 ZZZZZ ISO 8601 扩展格式(带有小时分钟和可选的字段) x...或 XXXX ISO 8601 基本格式(带有小时分钟和可选的字段) xxxxx 或 XXXXX ISO 8601 扩展格式(带有小时分钟和可选的字段) 持续时间值格式 durationfmt...m’ 分钟数 ‘s’ 秒数 数字计时器形式显示持续时间有以下格式: ‘dd:hh:mm:ss’ ‘hh:mm:ss’ ‘mm:ss’ ‘hh:mm’ 【注】可以通过附加最多 9 个 S 字符显示最多

2.5K10

Web前端学习 第3章 JavaScript基础教程9 内置对象

console.log(hours); 13 console.log(minutes); 14 console.log(seconds); 15 console.log(day); 我们可以通过JavaScript将当前时间显示在网页...; 6 var strTimeNow = hours + ":" + minutes + ":" + seconds; 7 h1.innerHTML = strTimeNow; 上面的例子我们成功将当前的日期显示...h1标签中,但是我们显示时间是获取的那个时间点,显示时间是静止不动的,我们可以通过计时器方法让我们显示时间与实际时间同步 1 var h1 = document.querySelector("h1...,然后通过计时器方法每秒执行一次这个函数,这样我们显示出来的日期就想电子钟一样每秒与真实事件同步一次。...课后练习 制作一个倒计时的功能,要求如下: 计算距离指定日期还有多少天,多少小时,多少分钟,多少控制台输出这个时间

49450

wdatepicker不展示_测新品:智能时钟、闹铃、温湿度计一个功能都不少

为了避免有残影,屏幕会每30分钟进行一次自动全局刷新,以保证屏幕显示效果。...顶部设计有4个触摸按键和通风孔,4个按键分别为:闹钟键,触摸查看闹钟,长按打开或关闭所有闹钟,触摸回到时钟模式,查看当前时间;H键:倒计时小时设置;M键:倒计时分钟设置;S/S键:开始或暂停计时,长按进入番茄工作模式...默认番茄工作时间为25分钟,如果需要更改,需要在米家APP上进行设置。番茄工作法工作时,屏幕下以此显示代表为:番茄计数、番茄休息时间显示、计时标识。...使用 测温湿智能时钟支持米家APP接入,连接成功的时候成品屏幕上会有一个链条图标的样子,表示连接中,其更多功能在APP设置更方便。...与家中的智能设备联动需要通过蓝牙网关,如果没有蓝牙网关,需要另行购买、 APP界面可以查看当前时间当前温湿度和温湿度变化曲线,设置选项中,可以对温湿度计相关参数设置,比如:切换到华氏度、设置番茄工作法

55340

使用 JavaScript 制作简单的中秋倒数计时器

首先,我们Date.parse的帮助下设置了一个特定的日期。也就是说,你必须确定要运行倒计时的时间,我们设置好中秋节是9月21日00:00。...future = Date.parse("sep 21, 2021 00:00:00"); 然后使用我new Date ()从设备中获取当前时间的方法。...在这里使用的时间不是任何服务器的时间,只是我们设备的当地时间。 然后我从预定时间中减去当前时间并将其存储差异(常量)中。结果,我一共得到了多少时间倒计时。.... ➤ 一等于 1000 毫秒,所以我们划分了整个倒计时时间 (diff)  1000 ➤ 一分钟等于 60 ,所以在这种情况下它被划分1000 * 60 ➤ 一小时等于 60 分钟,在这种情况下它被划分...在这里,我分别添加了天、小时分钟等文本。

1.9K10

通过案例带你轻松玩转JMeter连载(59)

3定时器 3.1 常数吞吐量定时器 此计时器引入可变暂停,计算时使总吞吐量(以每分钟样本数为单位)尽可能接近给定的数字。...图9 常数吞吐量定时器 通过右键弹出菜单中选择“添加->定时器-> Constant Throughput Timer” ,如图9所示。 目标吞吐量(每分钟的样本量):希望计时器尝试生成吞吐量。...Ø 当前线程组中的所有活动线程(共享):如上所述,但每个线程都会根据组中任何线程上次运行的时间进行延迟。 Ø 所有活动线程(共享):如上所述;每个线程都会根据任何线程上次运行的时间进行延迟。...3.2 准确的吞吐量定时器 精确吞吐量计时器是一个计时器,使用户能够确定他们希望测试中运行的吞吐量(每秒/分钟/小时采样器等)。与恒定吞吐量计时器相比,用户决定如何随时间分布样本时更加灵活。...吞吐量周期():吞吐量周期。例如,如果“吞吐量”设置为48,“吞吐量周期”设置为24,则每秒将获得2个样本。 测试持续时间):用于确保“测试持续时间时间段内获得吞吐量*持续时间样本。

77510

python--time模块

time模块,这个模块用的最多的地方可能就是计时器了 time.time()  返回当前时间戳 time.localtime([secs])  默认将当前时间戳转成当前时区的struct_time...    一天中的第几个小时(24小时制,00-23) %I     第几个小时(12小时制,01-12) %j     一年中的第几天(001-365) %m     月份(01-12) %M    ...分钟数(00-59) %p     本地am或pm的响应符 %S     (01-60) %U     一年中的星期数 %w     一个星期中的第几天(0-6,0是星期天) %W     和%U基本相同...) %%     %字符 备注 使用strftime()函数时,%p和%I配合使用才有效 简单的测试一下,打开IDLE 代码如下 ?...time模块还有很多函数,最常用的还是计时器,其次就是做时间

30410

linux基础命令介绍十四:定时任务

对于定义的每个任务,anacron系统启动后将会检查应当运行的任务,判断一次运行到现在的时间是否超过了预定天数(/etc/anacrontab中任务行第一列),如果大于预定天数,则会延迟一个时间(/...基于systemd的系统,可以通过计时器systemd.timer来实现精确到的计划任务。...可以写成5h 30min表示之后的5小时30分钟。...[Timer]标签下还可以设置基于挂钟时间(wall clock)的日历定时器OnCalendar=,所谓"挂钟时间"是指真实世界中墙上挂钟的时间操作系统中实际就是系统时间,这个时间是操作系统启动时从主板的时钟芯片中读取的...1日和3日,如果是周一或周五,则在每小时的30分45执行 单调定时器和日历定时器的其他内容可以通过命令man 7 systemd.time查询 Unit=后指明了与此计时器相关联的服务单元(我们例子中的

1.3K40
领券