项目中遇到上传视频功能，需要有预览和获取视频时长功能，因之前使用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. .bat脚本基本命令语法 http://www.cnblogs.com/iTlijun/p/6137027.html

    这个是我找到的非常好的一篇文章了: 目录批处理的常见命令(未列举的命令还比较多,请查阅帮助信息)     1.REM 和 ::     2.ECHO 和 @     3.PAUSE     4.ERR ...

  2. jquery ligerUI中ligerComboBox 初始值问题

    ligerComboBox项目中运用总结内容如下: $("#selectId").ligerComboBox({ data: proData, initValue: 0});这就默 ...

  3. 在Ubuntu 14.04 64bit上安装百度云Linux客户端BCloud

    参考:https://www.cnblogs.com/kluan/p/6014989.html 下载 网盘安装包,Bcloud 是一个 Linux 下超赞的客户端, 官网 github: https: ...

  4. ThinkCentre进入BIOS,设置intel virtualization technology

    VMware安装提示cpu虚拟化intel virtualization technology ThinkCentre重启长按F1 按enter,开启intel virtualization tech ...

  5. centos7+hadoop完全分布式集群搭建

    Hadoop集群部署,就是以Cluster mode方式进行部署.本文是基于JDK1.7.0_79,hadoop2.7.5.  1.Hadoop的节点构成如下: HDFS daemon:  NameN ...

  6. js页面停留时间

    //在线阅读时间 function onlineRead(minutes){ var o= new Object(); o.courseId=courseId; o.userId=userId; o. ...

  7. 页面中href链接的碰撞

    问题: 如上图动态生成一个li列表,点击之后页面直接全部刷新了一遍 原因: 动态生成的代码(第一个图)中href链接地址与顶部页面(上图)中固定的href链接存在冲突 如果动态生成的列表指定的链接名称 ...

  8. LeetCode题解：Flatten Binary Tree to Linked List：别人的递归！

    总是在看完别人的代码之后,才发现自己的差距! 我的递归: 先把左侧扁平化,再把右侧扁平化. 然后找到左侧最后一个节点,把右侧移动过去. 然后把左侧整体移到右侧,左侧置为空. 很复杂吧! 如果节点很长的 ...

  9. shell编程:基本语法

    要掌握一门语言,就要先掌握它的语法.如同C语言一般,shell也有自己的语法. 变量 按照惯例,Shell变量通常由字母加下划线开头,由任意长度的字母.数字.下划线组成.有两种类型的Shell变量: ...

  10. easy.py使用中ValueError: could not convert string to float: svm_options错误问题解决

    在使用easy.py中出现如下图所示问题 解决方法: 1.找到cmd = '{0} -svmtrain "{1}" -gnuplot "{2}" "{ ...