开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js获取视频总长

在JavaScript中获取视频的总时长，通常是通过HTML5的<video>元素结合JavaScript来实现的。以下是基础概念及相关操作：

基础概念

HTML5 Video Element: <video>元素是HTML5中用于嵌入视频的标签。
Duration Property: videoElement.duration属性返回视频的总时长，单位为秒。

获取视频总长的步骤

创建Video元素：首先，需要在HTML中创建一个<video>元素，并设置其src属性为视频文件的URL。
等待元数据加载：视频的元数据（包括时长）需要加载完成后才能获取。可以通过监听loadedmetadata事件来确保元数据已加载。
获取时长：在loadedmetadata事件的回调函数中，通过videoElement.duration属性获取视频的总时长。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get Video Duration</title>
</head>
<body>
    <video id="myVideo" width="320" height="240" controls>
        <source src="your-video-file.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <p id="duration"></p>

    <script>
        const video = document.getElementById('myVideo');
        const durationDisplay = document.getElementById('duration');

        video.addEventListener('loadedmetadata', () => {
            const duration = video.duration;
            durationDisplay.textContent = `Video duration: ${duration} seconds`;
        });
    </script>
</body>
</html>

优势

实时获取：可以在视频加载过程中实时获取时长信息。
简单易用：通过简单的JavaScript代码即可实现。

应用场景

视频播放器：在自定义视频播放器中显示视频时长。
视频管理：在视频上传和管理系统中显示视频时长。
进度条控制：结合视频播放进度条，实时更新播放进度。

可能遇到的问题及解决方法

时长为NaN：如果视频元数据未加载完成就尝试获取时长，可能会得到NaN。确保在loadedmetadata事件触发后再获取时长。
跨浏览器兼容性：大多数现代浏览器都支持<video>元素和相关属性，但仍需注意老旧浏览器的兼容性问题。

通过以上方法，你可以轻松地在JavaScript中获取视频的总时长，并在各种应用场景中使用这一信息。

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

有帮助

没帮助

相关·内容

JS预加载视频音频视频获取截图技巧分享原

参考文档里有解决预加载音视频，以及获取截图的技巧，文章内容提到跨域资源的解决方法。...参考文档： 1.JS预加载视频音频/视频获取截图技巧分享：http://www.php.cn/js-tutorial-385728.html

2.5K2 0

视频地址获取

首先需要获取视频的videoId，直接请求该url，然后match匹配： Pattern pattern = Pattern.compile("videoId: \'(.+)\'"); Matcher...matcher.find()) { String videoId = matcher.group(1); Log.i(TAG,videoId); } 获得videoId后开始获取...crc32.update(s.getBytes()); String crcString = crc32.getValue() + ""; //2.生成获取视频地址的url String...： System.err.println( new String(Base64.getUrlDecoder() .decode("main_url的值"))); 视频地址有有效时间...bak：关于videoId的获取： open fun test(url: String): String?

2.8K2 0

js获取URL参数

js获取地址栏的字段参数和字段值，通过js函数获取例如： https://test.com/?name=roger https://test.com/hello?...检查一个值： params.has('test') 获取一个值： params.get('test') 你也可以使用for…of…遍历所有的查询参数。...GetQueryStr("参数名3")); 第二种正则提取： function getQueryString() { var qs = location.search.substr(1), // 获取...q1=abc&q2=efg&q3=h 的url，获取 q1 参数值的方法如下： var qs = getQueryString(); var q1 = qs["q1"]; // abc 用上面两种getQueryString...()方法都能很好地解决获取url的querystring参数问题。

46.4K0 0

js获取url参数

js获取url参数一、 function getUrl(name) { var reg = new RegExp("(\\?...null) return unescape(r[2]); return null; } 二、 function GetRequest() { var url = location.search; //获取

28.3K8 0

js 获取多级路径

数据结构 let treeData = [{ id: 1, label: '一级 1', children: [{ ...

33.5K2 1

js获取当前域名

//获取域名 host = window.location.host; host2=document.domain; //获取页面完整地址

20.6K3 0

js获取外网IP

js获取外网IP <script src="http://pv.sohu.com/cityjson?

19.6K1 0

JS获取当前年份_js获取当前时间年月日

小知识积累（2） let timestamp = Date.parse(new Date()); let date = new Date(timestamp); //获取年份 let thieYear

23K2 0

前端如何获取当前时间_js 获取年份

前端js获取当前时间的方法： var time = new Date(); time.getYear(); //获取当前年份 time.getFullYear(); //获取完整的年份(4位,1970...time.getMonth(); //获取当前月份(0-11,0代表1月) time.getDate(); //获取当前日(1-31) time.getDay(); //获取当前星期X(0-6,0代表星期天...) time.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) time.getHours(); //获取当前小时数(0-23) time.getMinutes(); //...获取当前分钟数(0-59) time.getSeconds(); //获取当前秒数(0-59) time.getMilliseconds(); //获取当前毫秒数(0-999) time.toLocaleDateString...(); //获取当前日期 var mytime=time.toLocaleTimeString(); //获取当前时间 time.toLocaleString( ); //获取日期与时间为了让大家有一个更感官的了解

34.1K2 0

【Android FFMPEG 开发】FFMPEG 获取 AVStream 音视频流 ( AVFormatContext 结构体 | 获取音视频流信息 | 获取音视频流个数 | 获取音视频流 )

FFMPEG 音视频流获取流程 I . FFMPEG 获取音视频流信息 ( AVFormatContext 结构体 ) II . FFMPEG 获取音视频流数量 III ....FFMPEG 获取音视频流博客简介 ....FFMPEG 音视频流获取流程 ---- FFMPEG 音视频流 AVStream ( 结构体 ) 获取流程 : ① 获取音视频流信息 : avformat_find_stream_info ( )..., 在【Android FFMPEG 开发】FFMPEG 初始化 ( 网络初始化 | 打开音视频 | 查找音视频流 ) 博客中 , FFMPEG 初始化完毕后 , 获取了音视频流 , 本博客中讲解获取该音视频流对应的编解码器...博客中 , FFMPEG 初始化完毕后 , 获取了音视频流 , 本博客中讲解获取该音视频流对应的编解码器 , 从获取该音视频流开始 ; 2 .

7591 0

rtsp 获取视频流 java_浏览器无插件播放rtsp视频流 java后台 + js + html

传输数据流的长连接，网上很多都是node.js开发的http转websocket，借鉴采用java + netty 进行了这一步的转换。这个地方一定要搞清楚http和WS的区别，为啥要转WS。...本文的核心就是http转ws+ js页面帧展示. 原理： ffmpeg可以将rtsp视频流转换成很多格式的帧数据。...将这些数据以http长连接的方式推送给后台，后台转换为浏览器可以播放的WS数据流，浏览器通过js解析ws协议提取出每一帧后展示。...引入wfs.js，按自己需求进行微调，前期由于里面参数调整不到位，读帧的速度没调整好(_this.H264_TIMEBASE = 3000)，导致帧跳跃。...解决办法是定时(采用了30分钟)重新打开新的视频连接，替换老的视频连接，相当于偷偷的给用户换了个页面播放连接，新老视频播放中间有时间差注意好，预计新的视频流加载的可以平稳播放了再替换并关闭老的视频流，保证平稳过度

3.8K1 0

JS获取当前网址信息

通过window.location对象获取对应的属性 1、设置或获取对象指定的文件名或路径（pathname） window.location.pathname 2、设置或获取整个 URL 为字符串（href...） window.kk 3、设置或获取与 URL 关联的端口号码（port） window.location.port 4、设置或获取 URL 的协议部分（protocol） window.location.protocol...设置或获取 href 属性中在井号“#”后面的分段（hash） window.location.hash 设置或获取 location 或 URL 的 hostname 和 port 号码（host）...window.location.host 设置或获取 href 属性中跟在问号后面的部分（search） window.location.search 获取变量的值(截取等号后面的部分) window.location.search.substring...2、通过正则表达式准确的获取我们需要的参数。

13.8K3 0

js获取各种高度总结

在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。抽空整理了我自己常用到的，时间仓促，没有考虑到万恶的IE浏览器。。。。...获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight

12.6K2 0

js中获取对象类型

<!DOCTYPE html> <html> <head> <title> </title> <meta name="viewport" conte...

21.7K2 0

js获取页面宽高

网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：doc...

7.7K4 0

js获取本月的天数

那么还有什么可以简单获取到制定月份的天数吗?当然有呀! 接下来看一下骚操作!...let days=new Date(2018,7,0).getDate() 一行代码简单搞定获取制定月份的天数,什么原因呢! ?...,原来js中x年x月0号进行获取getDate()时候会返回本月最后一天是几号,这样我们就得到我们所需的数据了,最后一天几号就是多少题啦!...吼吼吼~~~~ ,在new 一个日期对象时候传入(年份,月份,0)获取几号就可以得到所需数据哈哈哈! 本博客所有文章如无特别注明均为原创。...原文地址《js获取本月的天数》

23.7K3 0

js获取随机数

//Math.random()获取随机数0-1的随机数 re=Math.random()+' ';//0-1随机数 document.write('0-1随机数'+re);

10.6K2 0

js获取当前系统时间

记录用到的js获取当前年,月,日,时分秒,季度,星期几,以后就不用再百度查了 var date = new Date(); var month = date.getMonth() + 1;//...(); //获取当前星期X(0-6,0代表星期天) date.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) date.getHours(); //获取当前小时数(0-23)...date.getMinutes(); //获取当前分钟数(0-59) date.getSeconds(); //获取当前秒数(0-59) date.getMilliseconds(); //获取当前毫秒数...(0-999) date.oLocaleDateString(); //获取当前日期 date.toLocaleTimeString(); //获取当前时间 date.toLocaleString( )...; //获取日期与时间 Math.floor( ( month % 3 == 0 ?

21.8K3 0

js 获取 url 查询参数

id=100 获取 id 的值的 js 代码如下： var id; var href = window.location.href console.log

18.5K5 0

JS获取GIF总帧数

那么如何通过js在上传前就拿到它的总帧数来判断呢？本文就跟大家分享一种解决方案，并将其封装成插件发布至npm仓库，欢迎各位感兴趣的开发者阅读本文。...写在前面此插件已经发布至npm，采用原生JS编写支持任意一个前端框架，如果你对其实现原理不感兴趣，只是想拿来解决你的实际问题，可以直接通过npm/yarn来安装，命令如下： # yarn安装 yarn...GIF logical screen descriptor block layout 我们用代码来获取下它的宽度与高度。.../gifParserPlugin.umd.js"> async function getGifInfo(e) { const gifParser = new...gif-parser-web GitHub地址：gif-parser-web-github 此处不讲插件的发布流程，如果你对此感兴趣请移步：使用CLI开发一个Vue3的npm库实现Web端自定义截屏(原生JS

7.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭