开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用Javascript检索<video>元素的长度(以秒为单位)？

要使用JavaScript检索<video>元素的长度（以秒为单位），您可以使用HTMLMediaElement接口的duration属性。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
 <title>Video Duration Example</title>
</head>
<body>
 <video id="myVideo" width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签.
  </video>
 <button onclick="getVideoDuration()">获取视频长度</button>
  <p id="duration"></p>
 <script>
    function getVideoDuration() {
      var video = document.getElementById("myVideo");
      var duration = video.duration;
      document.getElementById("duration").innerHTML = "视频长度：" + duration + " 秒";
    }
  </script>
</body>
</html>

在这个示例中，我们首先创建了一个<video>元素，并为其分配了一个ID。然后，我们创建了一个按钮，当单击该按钮时，将调用getVideoDuration()函数。在getVideoDuration()函数中，我们使用getElementById()方法获取<video>元素，并使用duration属性获取视频长度（以秒为单位）。最后，我们将视频长度显示在一个<p>元素中。

请注意，duration属性在视频元数据已加载时可用，因此在某些情况下，您可能需要等待元数据加载完成。您可以通过监听loadedmetadata事件来实现这一点：

var video = document.getElementById("myVideo");
video.addEventListener("loadedmetadata", function() {
  var duration = video.duration;
  document.getElementById("duration").innerHTML = "视频长度：" + duration + " 秒";
});

这将确保在元数据加载完成后立即获取视频长度。

相关搜索:在JavaScript中减去以秒为单位的日期使用time.Since的时间(以秒为单位如何计算以秒为单位的时间差？使用linux命令获取以秒为单位的墙壁时间？如何使用Javascript以秒为单位记录相当于Qualtrics的“页面提交”时间？如何使其返回以小时:分钟:秒为单位的值使用javascript的表单大小是否以字节为单位？时间戳-如何使用groupby计算以秒为单位的时间差使用jquery获取元素的宽度(以像素为单位)如何获取BigQuery中记录的平均间隔(以秒为单位如何检查两个日期之间的差异(以秒为单位)？我如何调整我的计时器，使其以秒为单位？使用AVFoundation或CoreAudio捕获精确长度(以帧为单位)的视频如何在PHP中获取创建文件的时间(以秒为单位如何找出两个日期之间以秒和纳秒为单位的时间差异？Javascript使用时区查找以小时为单位的时间差如何使用pandas计算两个DateTime列之间的时间差(以秒为单位)？如何在jquery中以秒为单位获取两个日期之间的差值？使用php中的mb_strlen统计字符串长度(以字节为单位 Javascript如何从以EnumValue为键的映射中检索值

相关搜索:

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

有帮助

没帮助

相关·内容

工具系列 | H5自定义视频播放器实现

使用canPlayType()方法检查浏览器是否能够播放指定的视频、声频。canPlayType()方法能够返回以下值：

01

9.HTML多媒体对象标签元素介绍

描述: 本章节主要讲解音视频多媒体标签元素的使用示例，帮助各位学习者快速入门HTML标签。

04

HTML5和CSS3提高

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

04

收益3583万？我是如何快速统计「李子柒」YouTube频道视频累计播放量并计算收益的

上一篇文章「年更博主冒个泡，或将开启可视化之旅」发布后，看到有人评论“催更催更，等下一篇”、“失踪人口回归”，还是挺开心的，没想看居然还有人看，不由感慨「终于等到我，还好你们没放弃」，doge。

02

HTML5 VideoAPI，打造自己的Web视频播放器

注意：audio和video元素必须同时包含开始和结束标签，不能使用

04

videojs播放器插件使用详解

HLS是苹果公司实现的基于 HTTP 的流媒体传输协议，全称 HTTP Live Streaming，可支持流媒体的直播和点播，主要应用在 iOS 系统，为 iOS 设备（如 iPhone、iPad）提供音视频直播和点播方案。

HTML、CSS、JavaScript学习总结

– 用JavaScript描述网页的事件处理，即鼠标或键盘在网页元素上的动作后的程序

02

SMIL应用教程

SMIL(Synchronized Multimedia Intergration Language,同步多媒体集成语言)是一种以简单，易于了解的XML语言使各种格式的多媒体播放同步的语言。它可以集成到其它XML语言中，其他XML语言也能集成到该语言中，从而强化 XML的”可扩展”特征。如果你使用过HTML,就会习惯于SMIL语法，至少一开始是这样。如果你未使用过HTML，但从本教程了解XML，你也会发现该词汇是较容易的一种。 SMIL能用于控制从源流进的媒体，如RealAudio和RealVideo以及各种其他媒体格式，包括图像，文本，声音和视频

07

浏览器之性能指标-LCP

前几天，我们写了关于Chrome的FCP,看后台数据，反响还是不错的。那么，今天我们继续讲另外一个比较重要的性能指标LCP。

03

2019年底前的web前端面试题初级-web标准应付HR大多面试问题

当margin给一个值的时候，指四个方向。当margin给二个值的时候，指的是上下左右

05

HTML5新特性

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

04

FLV 封装格式解析

本文为作者原创，转载请注明出处：https://www.cnblogs.com/leisure_chn/p/10662941.html

01

canvas视频截帧

Promise博客：https://vampireachao.gitee.io/2021/12/04/Promise/

02

ASP.NET MVC+LayUI视频上传

前段时间在使用APS.NET MVC+LayUI做视频上传功能的时，发现当上传一些内存比较大的视频就会提示上传失败，后来通过查阅相关资料发现.NET MVC框架为考虑安全问题，在运行时对请求的文件的长度（大小）做了限制默认为4MB（4096KB），因此我们需要在Web.Config中设置最大请求文件长度大小，本篇博客主要讲解如何设置Web.Config中的最大请求文件大小配置和提供一个完整的ASP.NET MVC+LayUI上传视频的教程，并且会提供一个完整的示例（是上传到GitHub）有兴趣的可以耐心的往下看。

02

JavaScript学习（三）

JavaScript中的所有事物都是对象，如：字符串、数值、数值、函数等，每个对象带有属性和方法。

01

JavaScript Dom + 内置对象一览表

JavaScript DOM 树使用记录一、window 对象 1.1 window 内置对象 1.2 window 事件 1.3 window 对象作为全局变量使用二、document 对象 2.1 dom 获取标签元素 2.2 dom 标签操作 2.x 其他 dom 操作三、JavaScript 内置对象 3.1 Object 对象 3.2 常用的 Date 对象 3.2.1 eg：获得当前的年份，月份，天，时，分，秒，并实时刷新 3.3 Array 对象 3.3.1 创建一个数组 3.3.2

03

[译] 网速敏感的视频延迟加载方案

一个大视频的背景，如果做的好，会是一个绝佳的体验！但是，在首页添加一个视频并不仅仅是随便找个人，然后加个 25mb 的视频，那会让你的所有的性能优化都付之一炬。

04

面试总结：移动web设计与开发

答：有audio标签，video标签，HTMLAudioElement和HTMLVideoElement，支持audio和video的事件。

02

[译] 网速敏感的视频延迟加载方案

一个大视频的背景，如果做的好，会是一个绝佳的体验！但是，在首页添加一个视频并不仅仅是随便找个人，然后加个 25mb 的视频，那会让你的所有的性能优化都付之一炬。

03

Web前端开发HTML笔记

HTML称为超文本标记语言,CSS全称层叠样式,CSS可以让简单的HTML页面变得漂亮起来,通常会将HTML与CSS结合起来使用.

02

JavaScript基础之六——内置对象原

JavaScript中的一些数据都是对象，对象实际上是属性与方法的包装。并不像其他类似Swift/OC/Java类的面向对象语言，在目前JavaScript的实现中并没有类的概念，开发者有如下两种方式来进行对象的构造：

02

Open Measurement -Android SDK

这些是Android Open Measurement SDK的集成说明。如果要将现有集成移植到OM SDK的最新版本，请参阅迁移指南。

02

音视频封装：FLV格式详解和打包H264、AAC方案（上）

flv即flash video，是Adobe公司推出的一种音视频封装格式，这家公司在音视频、图像图形领域也算是神一般的存在，多少都用过他们家的产品。常见的Photoshop和Flash palyer就是他们家的。今天要讲到的flv也是他们推出来的，也是Flash palyer播放的标准音视频格式。在HTML5出来之前，想在web上播放音视频，基本都靠flash插件。

04

使用 WPAD/PAC 和 JScript在win11中进行远程代码执行1

由于在这篇博文的其余部分中，我们将大量讨论 JScript VAR 和字符串，因此在深入了解这些漏洞的工作原理之前先描述这些内容是很有用的。

WEB动画的几种实现方式

WEB 的动画实现多种多样，随着 H5 的发展，实现动画的方式越来越多了。初步统计实现动画的方式有以下一些方式实现

02

怎么用 JavaScript 构建自定义的 HTML5 视频播放器

在网页中观看和分享视频内容是一个很常见的功能，多年来，视频嵌入网页的方式发生了变化。现在，我们在现代浏览器中使用

02

砖家：轻量化网络利好红米

手机使用上的“贫富差距”还在持续扩大， Lite-Web 可实现低端手机网页加载速度更快，处理更简单。作者 | 黄楠编辑 | 陈彩娴过去十年中，手机的日益普及促进了互联网接入的显著增加。在全球超35亿移动网络用户中，74% 的人生活在低收入和中等收入国家中，手机成为他们连接到互联网的主要方式。近日，有研究人员通过对56个国家和地区的实地调研，衡量网络浏览体验的全球差异，研究发现，当前移动数据成本和页面加载时间方面存在着显著不平等问题。不仅如此，今天的大多数流行网页在设计时，往往只考虑到高处理能力，

02

JS指定音频audio在某个时间点进行播放，获取当前音频audio的长度，音频时长格式转化

今天接到一个需求，需要获取某个.mp3音频文件的时间长度和指定音频audio在某个时间点进行播放（比如说这个视频有4分钟，我要让它默认从第2秒的时候开始播放），这里当然想到了H5中的audio元素，当然我们平时看这个标签上显示的音频时间格式是时:分:秒的格式的因此需要涉及到秒和时间格式的转化。因为刚开始对这块十分的陌生，最后通过查阅了网上的一些资料，最终完美的把这些功能点做好了。在这里分享一下，希望能够帮助有需要的小伙伴。

02

JavaScript基础语法（一）

在JavaScript中，有很多种操作符，算术操作符、赋值操作符、比较操作符以及逻辑操作符

02

MySQL全字段类型概览

MySQL支持多种数据类型：数字类型，日期和时间类型，字符类型，空间类型和JSON类型。

02

一张图概括淘宝直播背后的前端技术 | 赠送多媒体前端手册

2020年，直播带货火爆全网。想一探淘宝直播背后的前端技术？本文将带你进入淘宝直播前端技术的世界。

05

JWPlayer_nplayer浏览器

网盘：https://pan.baidu.com/s/1mmtppZSFOni5tLI2TJWKrw

01

JavaScript 入门（下）

[HTML入门与进阶以及HTML5] [CSS] [JS-上] [JS-下] [jQuery] [Node.js + Gulp 知识点汇总] [MongoDB + Express 入门及案例代码] [Vue项目开发-仿蘑菇街电商APP]

02

HLS.js：过去，当下和未来

HLS.js 是一款由苹果公司开发的，在浏览器中播放 HLS 的视频播放器。在最近，苹果发布了 Safari 浏览器中的低延时 HLS(LL-HLS)，同时在其他浏览器中实现了基于 HLS.js 的播放器。

05

CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

CSS3在CSS2.1的基础上新增加了许多属性，这里选择了较常用的一些功能与大家分享，帮助文档中有很详细的描述，可以在本文的示例中获得帮助文档。一、阴影 1.1、文字阴影 text-shadow <

05

深度学习的JavaScript基础：从浏览器中提取数据

在python语言中，通过文件、摄像头获取数据，并不是什么难事。但对于浏览器来说，出于安全的考虑，并不能直接访问本地文件，至于访问摄像头、麦克风这样的硬件设备，只是从HTML5才开始得到支持。本文就如果获取数据展开讨论，看看在浏览器中提取数据有哪些方法。

01

Memcached 常用指令

3、replace 命令 Memcached replace 命令用于替换已存在的 key( 键) ) 的 value( 数据值) )。如果 key 不存在，则替换失败，并且将获得响应 NOT_STORED。

01

# 学会这些 Web API 使你的开发效率翻倍

随着浏览器的日益壮大，浏览器自带的功能也随着增多，在 Web 开发过程中，我们经常会使用一些 Web API 增加我们的开发效率。

02

YouKu-mPLUG 最大中文视频语言数据集，助力增强多模态大型模型性能

mPLUG-video可以很好的理解视频的整体语义是“舞蹈视频”以及包含详细的视觉信息，比如“跳跃”和“扭动”等。

03

Web多媒体笔记

图像深度：指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度数(单色图像)。例如彩色图像每个像素用 R, G, B 三个分量来表示，每个分量用 8 为所以像素深度是 24 位，可以表示的颜色数目是 2^24。单色图像每个像素需要 8 位，则图像的像素深度是 8 位，灰度数目为 2^8。

01

使用Intersection Observer API实现视频队列自动播放

笔者利用空余时间研究了一下javascript的Intersection Observer API，发现其有很大的应用场景，比如图片或者内容的懒加载，视差动画等。笔者也在之前的文章中详细介绍了3种Observer（观察者）的用法，包括位置监听，dom变化监听以及窗口变化监听，它们有非常多的应用场景，所以很有必要研究明白，感兴趣的可以读完本片文章之后学习一下（几个非常有意思的javascript知识点总结）.

02

javascript如何实现类似西瓜视频的视频队列自动播放？

去年利用空余时间研究了一下javascript的Intersection Observer API，发现其有很大的应用场景，比如图片或者内容的懒加载，视差动画等。我也在之前的文章中详细介绍了3种Observer（观察者）的用法，包括位置监听，dom变化监听以及窗口变化监听，它们有非常多的应用场景，所以很有必要研究明白，感兴趣的可以读完本片文章之后学习一下（几个非常有意思的javascript知识点总结）.

02

JavaScript笔记

输出使用 window.alert() 写入警告框使用window.confirm() 确认框使用window.prompt() 输入框使用 document.write() 写入 HTML 输出使用 innerHTML 写入 HTML 元素使用 console.log() 写入浏览器控制台常见的HTML事件 onchange HTML 元素改变 onclick 用户点击 HTML 元素 onmouseover 用户在一个HTML元素上移动鼠标 onmouseout 用户从一个HTML元素上移

01

H.265/HEVC在Web视频播放的实践

以下是百度百科对于H.265的介绍： H.265是ITU-T VCEG继H.264之后所制定的新的视频编码标准。H.265标准围绕着现有的视频编码标准H.264，保留原来的某些技术，同时对一些相关的技术加以改进。新技术使用先进的技术用以改善码流、编码质量、延时和算法复杂度之间的关系，达到最优化设置。具体的研究内容包括：提高压缩效率、提高鲁棒性和错误恢复能力、减少实时的时延、减少信道获取时间和随机接入时延、降低复杂度等。H.264由于算法优化，可以低于1Mbps的速度实现标清（分辨率在1280P720以下）数字图像传送；H.265则可以实现利用1~2Mbps的传输速度传送720P（分辨率1280720）普通高清音视频传送。

02

花椒 Web 端多路音频流播放器研发

语音交友直播间 Web 端使用 WebRTC (Web Real-Time Communications) 实现多路音频流传输的播放。但由于云服务等原因，看播端我们需要改成 HTTP-FLV 或 HLS 协议的媒体服务。并实现

02

【Web技术】502- Web 视频播放前前后后那些事

这是因为当时没有其他方法可以在浏览器上流式传输视频。作为用户，您可以选择安装Flash或Silverlight之类的第三方插件，还是根本无法播放任何视频。

00

小程序如何调用摄像头和代码示例

小程序（如微信小程序）可以通过调用设备的摄像头API来访问摄像头。以下是基本步骤：

03

JS控制Video播放器(快进、后退、播放、暂停、音量大小)

比如：向上键对应的keyCode为38，向下键对应的keyCode为40，向左键对应的keyCode为37，向右键对应的keyCode为39，空格键对应的keyCode为32，

07

JS控制Video播放器(快进、后退、播放、暂停、音量大小)

比如：向上键对应的keyCode为38，向下键对应的keyCode为40，向左键对应的keyCode为37，向右键对应的keyCode为39，空格键对应的keyCode为32，

06

前端小技能，10个基本组件的代码片段

点击上方蓝字“ITester软件测试小栈“关注我，每周一、三、五早上 09:00准时推送，每月不定期赠送技术书籍。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭