项目中遇到上传视频功能，需要有预览和获取视频时长功能，因之前使用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. php有效防止同一用户多次登录

    PHP实现同一个帐号不允许多人同时重复登陆 数据库表 user_login_info字段:id,user_ip,user_id,last_access_timeuser_id 做唯一性索引1. 用户登 ...

  2. shell脚本判断执行用户

    在脚本中,判断执行者是否为root. 判断方法1, #!/bin/bash if [ `whoami` != "root" ];then echo " only root ...

  3. KMPlayer 一打开总是出现右面的窗口 导航区 怎样设置不会自动打开

    两步骤第一,右键-外观-标致-管理 删除默认标致 第二,打开hosts文件,位置在 C:\Windows\System32\drivers\etc 在最下面一行加入 127.0.0.1 player. ...

  4. WPF按钮响应函数中执行操作耗时较长时，UI 界面不能实时更新——问题原因与解决方案

    原因: 一般来说,一个WPF窗口程序,只有一个UI线程, 如果这个线程停在某个函数,UI将会被阻塞,所有其他的界面操作都不能即时响应. 解决方案: 新开一个线程来执行耗时较长的操作,以不阻塞UI.

  5. ubuntu 使用命令行登录oracle

    1.检查环境变量设置 echo $ORACLE_HOME 2.配置oracle数据库信息,将oracle地址端口等信息放在$ORACLE_HOME/network/admin目录下的tnsnames. ...

  6. php装curl拓展出错

    错误: checking for cURL in default path... not found checking for cURL 7.10.5 or greater... ./configur ...

  7. mysql 设置多个字段聚合自增

    DROP TEMPORARY TABLE IF EXISTS ttp_firstInvest; CREATE TEMPORARY TABLE ttp_firstInvest ( userid varc ...

  8. js 高效拼接字符串

    <script>//如果我们大量使用+=进行字符串拼接的话,将会使界面失去响应(卡死状态) //高效拼接字符串 var StringBuilder=function() { this.da ...

  9. idea中pom文件需要添加的依赖

    <!-- 如果不添加此节点mybatis的mapper.xml文件都会被漏掉. --> <!-- IDEA的maven项目中,默认源代码目录下的xml等资源文件并不会在编译的时候一块 ...

  10. Jsp基本语法 第二节

    关于JSP的声明   即在JSP页面定义方法或者变量: <%!Java代码%> 在JSP页面中执行的表达式:<%=表达式%>   这个里尤其注意不能以:结束 JSP页面生命周期 ...