用js获取视频播放时长

用js实现读取本地mp4文件时长

利用h5 video标签加载视频文件,在读取duration就可以了

问题在于要更换文件,使用<input type="file" > 标签发现读取的文件路径是隐藏的c:/fakepath/xxx.mp4

给video更换src时候会提示找不到文件。。。

又找了很久,大多是加载flash控件然后通过flash再取,不太喜欢这么做。

如今这H5的时代感觉这个小功能应该不是问题,又想了想,之前做过js读取本地图片在web上做预览,估计读个视频应该也可以所以试了一下

var url = URL.createObjectURL(file);

获取文件的url,测试可以读取到 blob:null/32052613-1f41-4b77-b65d-c1a989d7fe32,又试了一下 video.src=url发现视频可以加载。那么duration就能读取到了。

<video style="display:none;" controls="controls" id="aa" oncanplaythrough="myFunction(this)"></video>
<input type="file" onchange="changeFile(this)" >
function myFunction(ele) {<span style="white-space:pre">	</span>console.log(Math.floor(ele.duration));}	function changFile(ele){	var video = ele.files[0];	var url = URL.createObjectURL(video);	console.log(url);	document.getElementById("aa").src=url;}

终于通过这种间接的方式把时长获取到了。

chrome内核的测试了没问题,其他 我先不考虑了

时间: 2024-11-07 03:00:39

用js获取视频播放时长的相关文章

vue / js使用video获取视频时长

项目中遇到上传视频功能,需要有预览和获取视频时长功能,因之前使用upload(有需要的话可以参考下我之前的文章),这里就不赘述,直接用来上传视频,不过在上传之前和上传成功后的钩子里,获取不到时长: 没有时长怎么办呢,只能用原生JS来获取: 上传成功以后,将成功的路径绑定给video 使用js获取duration并赋给时间参数 这时你会发现,你得到的值是NaN 视频还未加载下来,无法同步获取到,使用定时器即可解决 OK了,现在可以获取到了 希望本文对你有所帮助! 原文地址:https://www.

js 计算请假时长(去除了周六日,节假日未清除)

js 计算请假时长(去除了周六日,节假日未清除) 2017-12-26 亦皓 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link href="./bootstrap/css/bootstrap.m

获取音频时长的总结

需要实现的需求: 前端展示录音的时长 实现该需求的前提条件: 1.深海捷(录音厂商)提供了两个关于录音的接口,一个是下载接口(访问接口,直接就下载音频文件了), 另一个接口是播放接口(接口返回一个html文件,文件中用Object标签实现了播放,可是只能在ie下播放,在chrom中无法展示播放器) 2.如果使用深海捷的服务拨打电话后,是会有回调事件,返回录音时长存到数据库的,所以这种场景已经有录音时长的数据,前端直接展示就 可以 3.还有一种场景就是接下来需要实现的场景,用户手动上传录音,这个时

获取视频时长

//            NSDictionary *opts = [NSDictionary dictionaryWithObject:[NSNumber numberWithBool:NO] //                                                             forKey:AVURLAssetPreferPreciseDurationAndTimingKey]; //            AVURLAsset *urlAsset

js实现视频本地预览,一级获取播放时长

<video style="display:none;" controls="controls" id="aa" oncanplaythrough="myFunction(this)"></video> <input type="file" onchange="changeFile(this)" > <script> function my

关于 jquery和js获取宽度时只能取整数,取不到小数点

最近在改版自已的一个网站的时候,遇到了一个问题. 用jquery的width()函数获取元素宽度的时候,返回得到的是整数,而不是小数. 如下图,谷歌上显示的宽度为1078.89px 而我用控制台输出了 console.log( $('.mid-list').width() ); 结果如下 为了排除先入为主的认为四舍五入,我又调整了元素的宽度,为1079.1px 得出的结果,依然是1079 显然,其算法确实是四舍五入. 以上在大多数情况下,完全符合我们对js算法的要求,也是十分合理的设定. 但是,

name值与id值在Js获取元素时的区别

1.适用范围 除base.head.html.script.meta.title标签外,id都可以用:name只适用于select.form.frame.iframe.img.a.input等中. HTML元素Input type='radio'分组,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现的. 2.获取方式 取得id:document.getElementById("id"); 取得name:document.getElementsByName(&qu

js获取年月日时分秒星期

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

使用ffmpeg获取视频时长等

查看视频信息的命令:ffmpeg -i 视频文件,如下: ffmpeg -i ryzh.mp4 控制台输出: 原文地址:http://blog.51cto.com/4754569/2324534