首页 > Web开发 > 详细

使用VUE脚手架+HTML5 input type = file 上传视频

时间:2018-08-04 00:29:33      阅读:1917      评论:0      收藏:0      [点我收藏+]

 

 

 

 

 

上传视频思路

HTML:
1. 在这里首先会用到html5标签 video 音频/视频
2. input type = file

技术分享图片

 

 

CSS 给一些样式

技术分享图片

技术分享图片

 


*******JS

技术分享图片

技术分享图片

 

js实现思路:
1.通过原生的方法获取上传文件(input)标签 并且交给一个变量。
2.通过原生的方法获取音频标签并且交给一个变量。
3.通过input标签得到自身的的files[0] ;而我们对input.files[0]数据需要处理,于是写一个方法。并且把input.files[0]传进去。

举个栗子:技术分享图片

 

4.处理数据的具体步骤;在getFileURL方法里面处理;

5.判断URL是否存在;如果存在就给video 设置src路径;

6. 通过video身上的duration属性;获取视频的长度;如果视频的长度超过60秒给与用户提示。

 

使用VUE脚手架+HTML5 input type = file 上传视频

原文:https://www.cnblogs.com/hemei1212/p/9416976.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!