项目中遇到上传视频功能，需要有预览和获取视频时长功能，因之前使用upload（有需要的话可以参考下我之前的文章），这里就不赘述，直接用来上传视频，不过在上传之前和上传成功后的钩子里，获取不到时长：

没有时长怎么办呢，只能用原生JS来获取：

上传成功以后，将成功的路径绑定给video

使用js获取duration并赋给时间参数

这时你会发现，你得到的值是NaN

视频还未加载下来，无法同步获取到，使用定时器即可解决

OK了，现在可以获取到了

希望本文对你有所帮助！

vue / js使用video获取视频时长的更多相关文章

  1. vue 获取视频时长

    参考资料:js获取上传音视频文件的时长 直接通过element-ui自带的上传组件结合js即可,代码如下: HTML: <el-upload class="upload-demo&qu ...

  2. java 代码获取视频时长

    package test; import it.sauronsoftware.jave.Encoder; import it.sauronsoftware.jave.MultimediaInfo; i ...

  3. php 获取视频时长

    利用ffmpeg只能获取到本地视频的信息. function video_time($file) { ob_start(); passthru(sprintf(FFMPEG_PATH, $file)) ...

  4. Swift3 根据秒数获取视频时长（转换成00:00:00时间格式）以及将时长转换成秒

    直接代码了: /// 秒转换成00:00:00格式 /// /// - Parameter secounds: <#secounds description#> /// - Returns ...

  5. 获取音、视频时长（NAudio，Shell32，FFmpeg）

    参考网址:https://blog.csdn.net/u013810234/article/details/57471780 以下为本次测试用到的音.视频格式: audio :”.wav;.mp3;. ...

  6. Android开发 获取视频中的信息(例如预览图或视频时长) MediaMetadataRetriever媒体元数据检索器

    前言 在Android里获取视频的信息主要依靠MediaMetadataRetriever实现 获取最佳视频预览图 所谓的最佳就是MediaMetadataRetriever自己计算的 /** * 获 ...

  7. javascript 获得以秒计的视频时长

    <!DOCTYPE html> <html> <body> <h3>演示如何访问 VIDEO 元素</h3> <video id=&q ...

  8. Long类型时间如何转换成视频时长？

    数据库中存放的视频时长是一个Long类型的毫秒/秒时间,现在需要把这个时间转换成标准的视频时长格式,在我看来这应该是一个很常用的转化有一个很常用的转换方法工具才对,可是我百度找了许久,没有一个简单直观 ...

  9. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

随机推荐

  1. [转] Android中的设计模式-备忘录模式

    转自Android中的设计模式-备忘录模式 定义 备忘录设计模式的定义就是把对象的状态记录和管理委托给外界处理,用以维持自己的封闭性. 比较官方的定义 备忘录模式(Memento Pattern)又叫 ...

  2. c# word操作

    合并单元格  http://www.360doc.com/content/11/0729/21/2097544_136620405.shtml

  3. <基础> PHP 进阶之 类（Class）

    属性 类的变量成员叫做“属性”,或者叫“字段”.“特征”,在本文档统一称为“属性”.属性声明是由关键字 public,protected 或者 private 开头,然后跟一个普通的变量声明来组成.属 ...

  4. Oracle事务隔离级别

    转自:https://blog.csdn.net/leozhou13/article/details/50449965

  5. 选择、操作web元素

    11月1日 什么是web元素 Selenium自动化主要就是:选择界面元素,操作界面元素(输入操作:点击.输入文字.拖拽等,输出操作:获取元素的各种属性),根据界面上获取的数据进行分析和处理 选择元素 ...

  6. dshow采集过程

    捕捉静态图片常用的filter是Sample Graber filter,它的用法参考手册.然后将捕捉filter的静态PIN连接到Sample Grabber,再将Sample Grabber连接到 ...

  7. laravel视图$errors为空

    最近用laravel5.2的validator时,完全参考手册操作,结果控制器$validator->errors()->all()正常显示错误信息,$validator->fail ...

  8. mysql索引小结——高性能mysql

    1.索引可以包含一个或者多个列的值,如果索引包含多个列的值,列的顺序很重要,mysql只能高效地使用索引的最左列前缀列. 2.索引是在存储引擎层而非服务器层实现的. 3.B-tree索引的限制: 如果 ...

  9. 如何遍历Set对象

    对 set 的遍历 1.迭代遍历: Set<String> set = new HashSet<String>(); Iterator<String> it = s ...

  10. 18.3 redis 的安装

    因为之前我们server不存东西 我们 发现 后打开的网页 是接手不到之前的变化,不能更新到最新的变化的. 我们需要做到server给client发最新的代码已达到同步 我们有三种做法同步到最新的代码 ...