开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在html5 js中动态显示视频时间戳

在HTML5和JavaScript中，可以使用Video API来动态显示视频时间戳。下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>动态显示视频时间戳</title>
</head>
<body>
    <video id="myVideo" width="640" height="360" controls>
        <source src="video.mp4" type="video/mp4">
    </video>

    <p id="timestamp"></p>

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

        video.addEventListener("timeupdate", function() {
            var currentTime = video.currentTime;
            var minutes = Math.floor(currentTime / 60);
            var seconds = Math.floor(currentTime % 60);
            var formattedTime = minutes + ":" + (seconds < 10 ? "0" : "") + seconds;

            timestamp.innerHTML = "当前时间戳：" + formattedTime;
        });
    </script>
</body>
</html>

在上面的代码中，我们首先创建了一个video元素，并指定了视频文件的路径。然后，我们创建了一个段落元素用于显示时间戳。接下来，使用JavaScript获取video和timestamp元素的引用。

通过video的timeupdate事件，我们可以监听视频的播放进度。每当视频的播放时间发生变化时，事件处理程序会被触发。在事件处理程序中，我们获取当前视频的播放时间（以秒为单位），然后将其转换为分钟和秒钟的格式。最后，我们将格式化后的时间戳显示在timestamp元素中。

这样，当视频播放时，页面上的时间戳会动态更新显示当前的播放时间。

推荐的腾讯云相关产品：腾讯云点播（https://cloud.tencent.com/product/vod）是一项基于云计算的视频点播服务，提供了丰富的视频处理和管理功能，适用于各种视频应用场景。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

HTTP-FLV直播初探

目前几种视频流的简单对比：协议 httpflv rtmp hls dash 传输方式 http流 tcp流 http http 视频封装格式 flv flv tag Ts文件 Mp4 3gp webm 延时低低高高数据分段连续流连续流切片文件切片文件 Html5播放可通过html5解封包播放(flv.js

08

h5中performance.timing轻松获取网页各个数据如dom加载时间渲染时长加载完触发时间

在控制台中输入window.performance.timing(html5的属性);

01

移动端及时调试工具 - weinre使用方法

HTML5学堂：在前一篇文章当中，我们借着weinre讲解了NodeJS中的一些简单命令，也讲解了weinre的安装方法，今天我们把weinre的使用“完结”掉。移动端页面的开发过程中，weinre“即时”的调试方式，能够让我们更好更快的解决调试问题，使调试工作变得更加方便。想要调试的文件放在哪里首先，按照全局模式“-g”进行安装~（前面一篇文章我们已经讲过了）之后，将我们需要调试的页面放置于如下目录当中：C:\Users\Administrator\AppData\Roaming\npm\node_

03

html5总结

用之前的标签完全可以代替的：header footer aside atrical nav address time mark section

02

带你认识 flask 时间日期

使用服务器端的Python渲染日期和时间来展示到用户的浏览器并非一个好主意。考虑如下的例子，我在2017年9月28日下午4点06分写这篇文章。我身处的时区是PDT(UTC-7)，在Python解释器中运行如下：

03

热传导问题的数值解法Edition4

关于本科《传热学》简单温度场数值求解，早先有2018年的视频：一维常物性无内热源无穷大平板温度场数值模拟(基于基于HTML5编程)。2019年重新录制了视频，并逐渐完善了配套程序，分别是：

01

免费资源 | ActiveReports 报表控件发布多平台 Demo 代码集合

近期，ActiveReports 产品开发组的小伙伴针对大家比较关注的报表功能、常见问题、经典实现，特意准备了一个Demo代码集合，涉及WinFormss \ ASP.NET \ MVC 多个技术平台，包含导出、打印、WebViewer、HTML5Viewer、自定义工具栏、自定义搜索等多个具体功能的实现。

04

从0到1打造直播 App

概要分享内容：互联网内容载体变迁历程，文字——图片/声音——视频——VR/AR——…….。从直播1.0秀场时代（YY），2.0游戏直播（斗鱼、虎牙、熊猫）到如今全民直播3.0泛生活娱乐时代（映客、花椒），国外直播app（Meerkat 、Periscope），随着VA/AR/MR提出的沉浸式视听体验，直播4.0时代很快就能到来。在这个全民娱乐的时代，直播已经火得不要不要的，各大公司都有自己的直播产品。本文主要从直播的一些基本知识,一步步打造直播app。直播那么火的背后有什么样的技术支撑呢？先将这些A

09

前端面试那些坑之HTML篇

HTML 1、Doctype作用？标准模式与兼容模式各有什么区别? （1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于<html> 标签之前。告知浏览器的解析器用什么文档标准解析这

09

HTML5 性能监控API - timing API

HTML5 的 performance timing API 统计了一个浏览器窗口从卸载当前页面开始到加载完毕目标页面的整个流程中，每个节点的时间戳通过这些节点的时间戳，我们可以计算出很多有用的信息例如 DNS 查询耗时 TCP连接耗时 request请求耗时解析dom树耗时 …… 在GitHub上找到一个很实用的JS代码，统计出了各项耗时数据地址是：https://github.com/CraryPrimitiveMan/performance-tool 下面列出其中的各项数据

flv.js怎么用？全面解读flv.js代码

flv.js项目的代码有一定规模，如果要研究的话，我建议从demux入手，理解了demux就掌握了媒体数据处理的关键步骤，前面的媒体数据下载和后面的媒体数据播放就变得容易理解了。

02

MathJax实现在网页中植入数学公式

《传热学》相关小程序演示动画如下（其中下图1D非稳态导热计算发散，调小时间步长后重新计算，结果收敛！）：

01

直播技术协议介绍

目前web前端采用的直播技术一般分为以下几类：rtp/rtcp、rtmp、http-flv、hls。下面介绍不同协议

01

[python从入门到放弃]安装Anaconda python求解方程(组)

1 https://www.anaconda.com/ 下载对应的anaconda安装包，一路下一步完成安装；

01

js学习总结

转自 http://blog.sina.com.cn/s/blog_75cf5f3201011csu.html

06

前端面试题1（HTML篇）

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

01

【性能】198-腾讯新闻前端团队：深入理解前端性能监控

https://segmentfault.com/a/1190000018785911

03

维护了这么久的服务器，你真的认识 Web 缓存体系？

前言很高兴认识大家，之前做过很多分享，今天这次终于讲到正题了。因为之前一直讲自动化运维，其实做这么多年运维，自动化运维没干多少年。这几年很多公司各方面机器数量多了，规模大了才开始去做自动化运维。今天的课题是高性能Web架构之缓存体系，之所以讲这个体系是因为作为一名运维工程师，我们经常会遇到Web站点访问很慢的情况。要解决这个问题，直接找开发，问题也不一定能解决。因为这个问题不仅仅是开发的问题，这个问题涉及到浏览器从发出请求到响应请求的一系列问题，所有地方都需要一点点摸清楚才能最后找到问题所在。 1、认

08

你真的了解 Web 缓存体系吗？

很高兴认识大家，之前做过很多分享，今天这次终于讲到正题了。因为之前一直讲自动化运维，其实做这么多年运维，自动化运维没干多少年。这几年很多公司各方面机器数量多了，规模大了才开始去做自动化运维。

01

全面进阶 H5 直播（上）

如果我们想要理解 HTML5 视频，首先需要知道，你应该知道，但你不知道的内容？那怎么去判断呢？ ok，很简单，我提几个问题即可，如果某些童鞋知道答案的话，可以直接跳过。你知道 ogg,mp4,flv,webm（前面加个点 .）这些叫做什么吗？那 FLV，MPEG-4，VP8 是啥？如果，基友问你要片源，你会说我这是 mp4 的还是 MPEG-4 的呢？当然，还有一些问题，我这里就不废话了。上面主要想说的其实就两个概念：视频文件格式（容器格式），视频编解码器（视频编码格式）。当然，还有另外一种，叫做

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭