项目中遇到上传视频功能，需要有预览和获取视频时长功能，因之前使用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. 500G JAVA视频网盘分享 (JEECG开源社区)

    500 G JAVA视频网盘分享(JEECG开源社区)   [涵盖从java入门到深入架构,Linux.云计算.分布式.大数据Hadoop.ios.Android.互联网技术应有尽有]       J ...

  2. R-CNN 学习记录

    CNN是一个运用卷积神经网络进行图片分类的开山之作.RCNN是第一个把图片分类和目标检测连接起来的作品. RCNN主要解决的问题是: 1.怎样用深度神经网络进行目标定位:2.怎样用小批量的标注数据来训 ...

  3. Activity生命周期，切换，参数传递，bundle（包），值对象，Activity参数返回，Activity的启动模式

    Activity代表手机屏幕的一屏,或是平板电脑中的一个窗口.它是android应用中最重要的组成单元之一,提供了和用户交互的可视化界面.在一个Activity中,可以添加很多组件,这些组件负责具体的 ...

  4. css：清楚浮动

    这个清楚浮动的方法最常用,给浮动字元素的父盒子,也就是不浮动元素,添加一个lhearfix的类,其类的css样式为: .clearfix:after{ /*必须要写这三句话*/ content:''; ...

  5. 尚硅谷springboot学习14-自动配置原理

    配置文件能配置哪些属性 配置文件能配置的属性参照 自动配置的原理 1).SpringBoot启动的时候加载主配置类,开启了自动配置功能 @EnableAutoConfiguration 2).@Ena ...

  6. 转：探讨JS合并两个数组的方法

    我们在项目过程中,有时候会遇到需要将两个数组合并成为一个的情况. 比如: var a = [1,2,3]; var b = [4,5,6]; 有两个数组a.b,需求是将两个数组合并成一个.方法如下: ...

  7. LeetCode OJ 77. Combinations

    题目 Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For exa ...

  8. 自行编译mwan加入openwrt里

    参考源文:http://www.right.com.cn/forum/thread-124449-1-1.html 本例以 opoenwrt 12.09正式版为例,原软件来自openwrt 英文论坛: ...

  9. python实现根据文件关键字进行切分为多个文件

    来源:在工作过程中,需要统计一些trace信息,也就是一些打点信息,而打点是通过关键字进行的,因此对一个很大的文件进行分析时,想把两个打点之间的内容单独拷贝出来进行分析 #!/usr/bin/env ...

  10. 8.抽象类、接口和多态.md

    目录 1.抽象类 1.抽象类 2.接口和抽象类的关系 2.1实现上的区别: 22.类和接口的关系: 2.3.Java为什么只能单继承可以多实现: 2.4.接口和接口的关系: 3.多态 2.接口和抽象类 ...