项目中遇到上传视频功能，需要有预览和获取视频时长功能，因之前使用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. AWS 相关阅读

    http://www.infoq.com/cn/articles/aws-s3-dive-in http://baike.baidu.com/link?url=Jo9OQmjxXZLxyhc6JvaD ...

  2. webform（复合控件）

    一.组合单选 RadioButtonList 单选按钮与简单控件不同,可理解为在集合中放置多对象 例: <asp:RadioButtonList ID="RadioButtonList ...

  3. 使用STM32的USART的同步模式Synchronous调戏SPI【usart模拟spi理论】

    [原创出品§转载请注明出处] 出处:http://www.cnblogs.com/libra13179/p/7064321.html 什么东西?? 我们先来看我们平常看到SPI的时序图(呵呵,要是忘记 ...

  4. web安全/渗透测试--1--web安全原则

    web 安全:  https://blog.csdn.net/wutianxu123/article/category/8037453/2 web安全原则 安全应该是系统开发之初就考虑的问题.换句话说 ...

  5. JEECG-P3开发专题 - 开发环境搭建入门

    官方标准开发工具: 1 .IDE Eclipse Java EE IDE for Web Developers. Version: Mars.2 Release (4.5.2) Build id: 2 ...

  6. Srping cloud Ribbon 自定义负载均衡

    IRule 默认提供有7种方式,使用轮询方式 如何自定义 1:主启动类加@RibbonClient @RibbonClient(name="微服务名", configuration ...

  7. Navicat Premium 连接Oracle 数据库（图文教程）

    一.需要准备的软件 Navicat premium 32位 官方下载地址:http://www.navicat.com.cn/products/navicat-premium Instant Clie ...

  8. 代码直连指定ip的dubbo服务

    http://blog.csdn.net/buqutianya/article/details/69229384

  9. 反射机制（java）

    反射机制 反射机制可通过在运行时加载类名而获取类,并对其进行操作.工厂模式,动态代理中较常用到. 在实际场景中:由于有好多类具有共同的接口样式,而他们又用的不是很频繁,如果在服务器中保有这些类会占用资 ...

  10. Spring事务管理——回滚(rollback-for)控制

    探讨Spring事务控制中,异常触发事务回滚原理.文章进行了6种情况下的Spring事务是否回滚. 以下代码都是基于Spring与Mybatis整合,使用Spring声明式事务配置事务方法. 1.不捕 ...