vue 获取视频时长的实例代码

2024-12-09 12:33:00

直接通过element-ui自带的上传组件结合js即可，代码如下：

HTML：

<el-upload class="upload-demo" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess"
     :before-upload="beforeAvatarUpload">
     <button class="ce-button not-hover primary">
      <i class="ce-icon_upload"></i>
      <span>重新上传</span>
     </button>
    </el-upload>

js：

 beforeAvatarUpload(file) {
    var fileName = file.name || ''
    var ext = fileName.split('.')[fileName.split('.').length - 1]
    if (ext !== "doc" && ext !== "docx" && ext !== "xls" && ext !== "xlsx"
     && ext !== "ppt" && ext !== "pptx" && ext !== "pdf" && ext !== "mp4") {
     this.$notify({
      title: "失败",
      message: "上传资源只能是 doc/docx/xls/xlsx/ppt/pptx/pdf/mp4 格式!",
      type: "error",
      duration: 3000
     });
     return false
    }
    // ppt(10MB)，word(10MB)，excel(5MB)
    if (ext == "doc" || ext == "docx" || ext == "ppt" || ext == "pptx") {
     debugger
     if (parseInt(file.size) > parseInt('10485760‬')) {
      this.$notify({
       title: "失败",
       message: "上传word、ppt文件上限为10MB!",
       type: "error",
       duration: 3000
      });
      return false
     }
    }
    if (ext == 'mp4') { // 获取视频时长
     var url = URL.createObjectURL(file);
     var audioElement = new Audio(url);
     var duration;
     audioElement.addEventListener("loadedmetadata", function (_event) {
      duration = audioElement.duration; //时长为秒，小数，182.36
      this.$parent.$data.wDuration = parseInt(duration)
      console.log(duration);
     });
    }
    this.$parent.$data.wFileName = file.name
    this.$parent.$data.wSize = parseFloat(file.size / 1024).toFixed(2) //获取文件大小
   }

总结

以上所述是小编给大家介绍的vue 获取视频时长的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎欢迎给我留言，小编会及时回复大家的！

vue2.0实现音乐/视频播放进度条组件

基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区域停留在滑动结束的位置,歌曲从当前进度开始播放. ③:点击进度条,橙色进度条长度变为点击处至起点的长度,并从当前点开始播放歌曲. 大概思路: ①:左边的时间可以通过audio播放时派发的timeupdate事件获取,右边的时间为接口
Vue 莹石摄像头直播视频实例代码

Vue 莹石摄像头直播视频代码. HTML代码: <div class="mainClass" v-show="rtmp_url!=''"> <video id="myPlayer" controls playsinline webkit-playsinline autoplay> <source type="application/x-mpegURL" :src="http_url&q
vue富文本框（插入文本、图片、视频）的使用及问题小结

今天在vue里面插入富文本遇到了一些小坑在这里提供给大家用于参考,如有错误,望多加指正. 我这里使用的是Element-ui的上传图片组件首先引入Element-ui(这个我就不作赘述了,详情参考element中文官网) 在引入富文本组件vue-quill-editor 使用在main.js引入相应的样式 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/
vue 录制视频并压缩视频文件的方法

文件上传框<input type="file">,除了可以选择文件上传之外,还可以调用摄像头来拍摄照片或者视频并上传.capture属性可以判断前置or后置摄像头.在视频播放的过程中,用canvas定时截取一张图片,然后用gif.js生成一张GIF图,从而完成前端的视频压缩. 我这里使用的是Vue写的,以下是我的流程及代码: 一.下载gif.js相关文件,可以到这里下载,然后将这几个文件放在根目录的static/js里面. gif.js相关文件及存放路径二.下载依赖包:
Vue结合Video.js播放m3u8视频流的方法示例

首先,我们需要在vue工程中安装video.js相关依赖. npm install --save video.js npm install --save videojs-contrib-hls 然后,我们需要引入videojs的css文件,例如在main.js中引入 import 'video.js/dist/video-js.css' 接着,我们在需要播放视频的页面引入js对象 import videojs from 'video.js' import 'videojs-contrib-hls
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式

本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果.并且基于 Vue.js 2.0 全家桶.具体效果如下图所示: 最终效果可以翻到文章最后观看. 1. 背景视频 Web 页面的既有实现方式国外有一个很好的网站「Coverr」 ,提供了完善的教程和视频资源,帮助前端开发者构建酷炫的背景视频主页,网站效果示例如下图所示: 教程如下所示: 从图中以及我
vue 获取视频时长的实例代码

直接通过element-ui自带的上传组件结合js即可,代码如下: HTML: <el-upload class="upload-demo" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <button cl
PHP 获取视频时长的实例代码

具体代码如下所示: /* * 获得视频文件的缩略图和视频长度 * @date 2018-05-16 * @copyright */ //获得视频文件的总长度时间和创建时间根据视频长度判断是否失效 public function getTime($url) { //获取视频重定向后的链接 $location = locationUrl($url); //获取视频Content-Length $responseHead = get_data($location); $list1 = explode
Python实现获取视频时长功能

目录前言环境依赖代码验证一下补充前言本文提供获取视频时长的python代码,精确到毫秒,一如既往的实用主义. 环境依赖 ffmpeg环境安装,可以参考:windows ffmpeg安装部署本文主要使用到的不是ffmpeg,而是ffprobe也在上面这篇文章中的zip包中. 代码不废话,上代码. #!/user/bin/env python # coding=utf-8 """ @project : csdn @author : 剑客阿良_ALiang @f
Java获取视频时长及截取帧截图详解

前言只是最近碰到有这方面的项目需求,所以简单 Mark 下本文.下面的示例是参考过他人分享的文章,之后本人再自行实践.调整和测试过的,希望对有这方面需求的人有所帮助. 示例添加依赖 <dependency> <groupId>org.bytedeco</groupId> <artifactId>javacv-platform</artifactId> <version>1.4.4</version> </depe
Java获取视频时长、大小的示例

项目中有这样一个需求,网页上上传了一个视频,需要获取此视频的时长.大小,把这两个数据返回给前台在页面显示.后台使用的是springboot框架,项目部署在linux上面.下面是核心代码: 1.pom文件中需要导入的jar包依赖 (分为两部分:核心包.ffmpeg包两部分,ffmpeg包又分为Windows环境以及Linux环境,同时又区分32位系统以及64位系统.针对于不同的运行环境要导入不同的包,这一点对于开发.测试环境为Window而生产环境为Linux的情况,尤其要注意需要导入所有
Java通过调用FFMPEG获取视频时长

FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.采用LGPL或GPL许可证.它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进的音频/视频编解码库libavcodec,为了保证高可移植性和编解码质量,libavcodec里很多codec都是从头开发的. 由此看来FFmpeg很强大,很多主流的音频.视频处理软件都使用了FFmpeg. FFmpeg下载下来解压,cmd进入到FFmpeg.exe目录中,即可在命令行下进行各种操作,查看视频信息命令:f
js获取视频时长代码

网上找的,因为最近要用,但还没试过复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea
Python爬取视频时长场景实践示例

目录简介: 获取视频时长的方式安装获取视频时长的3种方式对比简介: 在视频相关测试场景下,例如:有时需要知道全部视频的汇总时长,显然一个个打开并且手工计算耗时耗力,我们可以通过编写脚本进行快速汇总. 获取视频时长的方式 1.通过subprocess进行获取. 2.通过moviepy库中VideoFileClip获取. 3.通过cv2库获取. 安装 1.subprocess:无需安装,Python内置. 2.moviepy:pip install moviepy. 3.cv2:pip in
vue+node 实现视频在线播放的实例代码

1.node服务端数据流传输,可在线缓存 //获取参数 var params=urldeal.parse(req.url,true).query const ROOT_PATH = process.cwd();//必须使用绝对路径,使用相对路径会直接下载文件 let path =ROOT_PATH+params.url; let stat = fs.statSync(path); //获取文件信息 let fileSize = stat.size; let range = req.header
vue router 组件的高级应用实例代码

1 动态设置页面标题页面标题是由 <title></title> 来控制的,因为 SPA 只有一个 HTML,所以当切换到不同的页面时,标题是不会发生变化的.必须通过 JavaScript 来修改 <title></title> 中的内容: window.document.title ='xxx' 有一种思路是在每个页面的 *.vue 的 mounted 钩子函数中,通过 JavaScript 来修改 <title></title>

vue 获取视频时长的实例代码

相关推荐

随机推荐