项目中遇到上传视频功能，需要有预览和获取视频时长功能，因之前使用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. Spark面对OOM问题的解决方法及优化总结 (转载)

    转载地址: http://blog.csdn.net/yhb315279058/article/details/51035631     Spark中的OOM问题不外乎以下两种情况 map执行中内存溢 ...

  2. 开发升级-微信小程序（感谢黄秀杰老师）

    借助老师的博客 初次认识到了小程序开发的便捷,同时也深刻的感受到了,时代在不断地进步,编译将更加平民化,每一个人都将可以动手创造一款不错的软件 在黄秀杰老师的模板下,同时进行了修改,也在老师的模板下, ...

  3. Centos7 搭建Gitlab服务器并配置项目全过程

    https://blog.csdn.net/Abysscarry/article/details/79402695 gitlab与jenkins整合搭建      https://blog.csdn. ...

  4. Centos7 下搭建SVN ＋ Apache 服务器

    1. 安装httpd 安装httpd服务: $ sudo yum install httpd 检查httpd是否安装成功: $ httpd -version Server version: Apach ...

  5. Analysis of Web.xml in Hello1project

    一下是hello1  web inf 里的  web.xml <?xml version="1.0" encoding="UTF-8"?><w ...

  6. oracle添加列到指定位置

    http://blog.csdn.net/liufeng_king/article/details/7421826

  7. 在Ubuntu 16.04 上编译安装OpenCV3.2.0（Cmake + python3 + OpenCV3）(转)

    1 安装CMAKE sudo apt-get install cmake 2 安装python及其所依赖的软件包 sudo apt-get install build-essential sudo a ...

  8. python语言中的数据类型之元组

    数据类型 元组       tuple 元组:不可变类型 用途:元组就是一个不可变的列表,当需要存不改动的值时可用元组 定义方式:在()内用逗号分隔开多个任意类型的元素 t=(1,2.2,'aa',( ...

  9. git release功能

    命令行: git tag -a v3. -m "这是4.0版本" git push origin v3. //git tag -a 标签名称 -m "说明" / ...

  10. Pronunciation – The Definitive Guide to the Top 100 Words in American English

    Pronunciation – The Definitive Guide to the Top 100 Words in American English Share Tweet Share Tagg ...