html5读取网页视频时长

最新推荐文章于 2024-06-22 11:32:43 发布
最新推荐文章于 2024-06-22 11:32:43 发布
阅读量1.8w 收藏 4
点赞数
分类专栏： JavaWeb项目开发 文章标签： html5 video 时长
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youngage/article/details/44674537
版权
本文介绍了如何使用HTML5的video元素结合JavaScript或jQuery获取视频的时长。当视频元数据加载完成并且可以流畅播放时，通过监听oncanplaythrough事件来获取时长，并展示了具体的JS和jQuery代码示例。
摘要由CSDN通过智能技术生成
1、html5 <video>元素的属性中包括了时长（duration）属性。单位为秒。只支持mp4、ogv格式。

http://www.w3school.com.cn/html5/html_5_video_dom.asp 

在视频的元数据已加载后，时长属性才可用。

2、视频加载事件处理

当视频可以正常播放且无需停顿时执行，oncanplaythrough 事件。

http://www.ziqiangxuetang.com/jsref/event-oncanplaythrough.html

3、js代码示例

<html>
<body>
<video id="aa" controls oncanplaythrough="myFunction()">
<source src="mov_bbb.mp4" type="video/mp4">

最低0.47元/天 解锁文章
youngage
关注
专栏目录
H5网页播放rtmp实时视频流，网页直播
10-09
本文将深入探讨如何在H5网页上实现RTMP（Real-Time Messaging Protocol）实时视频流播放，以及如何处理延迟问题和播放错误。 首先，RTMP是一种专为实时数据传输设计的协议，常用于视频直播流媒体服务。它允许服务器...
js获取视频时长代码
10-26
下面的这段js获取视频时长代码是网上找的，还没有测试,需要的朋友可以参考下
html5 获取视频长度,获取HTML5视频的时间长度
weixin_32512451的博客
06-07 1415
HTML5视频的Bigger体验是非常令人振奋的,很简单的道理，不用加载和依赖烦人的Flash或其他第三方插件来播放视频，也是大功一件。我们可以通过自定义控件对视频进行显示和操控,其中一个常见的需求是显示视频的时长(duration)。下面我们一起来看看如何获得并显示视频的持续时间!JavaScript 代码video 元素有一个属性(property)叫做 duration,表示的是视频内容的时...
如何获取HTML5视频的持续时间
weixin_33949359的博客
03-14 282
HTML5视频的Bigger体验是非常令人振奋的,很简单的道理，不用加载和依赖烦人的Flash或其他第三方插件来播放视频，也是大功一件。我们可以通过自定义控件对视频进行显示和操控,其中一个常见的需求是显示视频的时长(duration)。下面我们一起来看看如何获得并显示视频的持续时间! JavaScript 代码 video 元素...
html5 中的video标签 获取视频总时长，当前播放时间,播放结束触发的的事件， 及一些常用的video 事件
热门推荐
业余前端的职业经历
01-08 3万+
还是和往常一样废话不多BB 直接上代码 我也要去吃饭了 太饿了 <video id=“vid”> <source src="./video.mp4"></video> //尽量这样写 别直接再video中写src 那样会出现啊兼容性问题 <div class="time1">00:00:00</div> //视频播放时间 &lt...
html5视频时长代码,html5读取网页视频时长
weixin_39558391的博客
06-07 471
1、html5 元素的属性中包括了时长(duration)属性。单位为秒。只支持mp4、ogv格式。http://www.w3school.com.cn/html5/html_5_video_dom.asp在视频的元数据已加载后，时长属性才可用。2、视频加载事件处理当视频可以正常播放且无需停顿时执行，oncanplaythrough 事件。http://www.ziqiangxuetang.com...
解决：移动端H5的＜video＞初始化拿不到总时长
学习使我快乐_玉祥
07-30 962
在的初始化后，会调用如下事件。解决方案：添加自动播放属性：然后这个方法里，用js在0.01秒后主动关闭播放，接着在0.1秒之后获取视频总长度即可（这里用0.01秒有几率失败）。这样连视频的预览图都省了，哈哈哈😁😁😁😁😁。。。。
基于HTML5实现手机网页视频播放器源码.zip
11-21
HTML5的`metadata`加载事件可以帮助我们获取视频的元数据，如宽度、高度、时长等，这些信息可用于初始化播放器界面。 9. 音频轨道和字幕支持： HTML5的`<track>`元素可以添加音频轨道和字幕，通过设置`kind`属性为`...
HTML5&CSS3网页制作：视频和音频的方法和事件.pptx
06-01
HTML5 是一种强大的网页开发技术，它极大地扩展了网页内容的表现形式，特别是在视频和音频的处理上。在HTML5中，`<video>` 和 `<audio>` 标签为嵌入和控制多媒体内容提供了原生支持，消除了对第三方插件的需求。本篇...
使用video.js或原生事件统计视频观看时长
10-12
使用video.js和原生事件实现了两版视频统计时长，并且支持网络卡顿时暂停统计时长，重新播放时可以继续统计时长的功能，兼容性比较强，可根据实际再进行调整，基本原生事件都可以实现相关时长统计且误差很小，还可以支持多视频分别统计时长。
HTML5自制网页视频播放器的实现.pdf
01-01
例如，`play()`和`pause()`方法用于控制视频的播放和暂停，`currentTime`属性可以获取或设置视频当前播放的时间，`volume`属性用于调整音量，`duration`属性则表示视频的总时长。此外，还有诸如`paused`、`ended`等...
html5 video获取当前时间和视频总时间长度
weixin_30924087的博客
10-24 4823
　html： <video id="video-active" class="video-active" width="640" height="390" controls="controls"> <source src="myvideo.mp4" type="video/mp4"> </vid...
js获取上传视频的时长（video标签获取视频时长）
huangxingjie的博客
04-27 4809
h5配合javascript通过video标签获取视频时长 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input ty...
获取网上流视频总时长和当前播放时长
weixin_34365635的博客
11-22 1484
1.获取网上流视频总时长 NSURL *movieURL = [NSURL URLWithString:self.myVideoUrlStr]; NSDictionary *opts = [NSDictionarydictionaryWithObject: [NSNumbernumberWithBool:NO]forKey:AVURLAssetPreferPrecise...
js获取视频长度的3种方法
飙歌的博客
11-15 1万+
基本选择框： <div class="form-group col-sm-12"> <label class="control-label">获取时长1。。。。</label> <input class="form-control" type="file" id="test" οnchange="getTime()"> </div> 获取方式： 第一种，监听onloadedmetadata ： functi...
基于DrissionPage的数据获取和工作时长计算
最新发布
hkcn_wjl的博客
06-22 198
近期有了解DrissionPage相关内容，并基于公司计算奋斗值的要求下，编辑一版自用的奋斗值计算流程。初版代码，有一些冗余的变量和逻辑没有删除。
前端如何获取音视频时长（包括只有文件没地址情况时）
weixin_50236973的博客
07-31 2854
【代码】前端如何获取音视频时长（包括只有文件没地址情况时）
直播系统源代码，java获取视频时长
云豹网络科技
07-28 273
以上就是 直播系统源代码，java获取视频时长，更多内容欢迎关注之后的文章。直播系统源代码，java获取视频时长。
使用HTML5与JavaScript自制简单视频播放器
在HTML5中，我们不再依赖Flash或ActiveX等技术来实现网页视频播放。HTML5提供了原生的`<video>`标签，可以直接在浏览器中播放视频，同时提供了API接口，允许开发者通过JavaScript进行交互式控制。以下是一些关键知识...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值