html5视频前端视频上传，手机拍照上传，手机录像上传

最新推荐文章于 2024-05-13 09:24:19 发布

我本名叫一休

最新推荐文章于 2024-05-13 09:24:19 发布

阅读量4.1w

点赞数 10

文章标签： html5 视频上传手机摄像头图片上传微信

本文链接：https://blog.csdn.net/qq_36073929/article/details/53908384

版权

我cao，真不知道该怎么说。看图吧

就是让客户点击按钮的时候可以触发到图二，手机自带的录像机。录像之后再上传。

当时的需求就是，（微信里面的）手机页面可以上传视频，也可以想图二那样。就是可以触发手机的录像功能！！

（说真的这功能写的真是头疼。看了各种大神的帖子博客啥的。小白，我就不诉苦了。）

放几个链接：

html5调用手机摄像头地址：
http://www.qdfuns.com/notes/26716/2d4fea81a990f8532ce7fa43af286add.html

（原来html5新特性直接就可以调用到手机的一些自带的比如相机啊，录像啥的。看到了希望。）

图片上传地址：

http://www.qdfuns.com/notes/18123/7110b12b485098aab5dfc2c59760688c.html

我是写完了图片上传之后才看见这个（宝宝心里苦。）

另外视频上传所借鉴参考文章地址：

http://blog.csdn.net/journey191/article/details/40744015

（这个我发现太高深我看不懂，有些方法已经过时了）

http://www.jq22.com/jquery-info2247

（这个我忘了，反正我也试了好久。感觉不是我要的，我就放弃了这个。）

http://blog.csdn.net/smm188/article/details/50750437

（这个也看了一遍就放弃。）

我并不怎么想用插件来做。（我只想简单的做出来）

http://www.cnblogs.com/hutuzhu/p/5254532.html

完美解决！！！我基本就是抄的，奥，不，借鉴，借鉴。

另外借鉴css样式地址：

http://www.haorooms.com/post/css_input_uploadmh

HTML

#######################

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,user-scalable=0">
<title>报修</title>
<link rel="stylesheet" type="text/css" href="WEIXIN/css/weui.min.css" />
<script type="text/javascript" src="WEIXIN/js/jweixin-1.0.0.js"></script>
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/flexslider.css" />
<link rel="stylesheet" href="css/swiper.css" />
</head>
<style>
/*a upload */
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
/* overflow: hidden; */
display: inline-block;
*display: inline;
*zoom: 1
}

.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}

.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
.qin {
position: fixed;
top:0px;
left:0px;
width:100%;
height:90%;
overflow-x:hidden;
/* overflow:scroll; */

}

</style>
<body>
<div class="qin">
<div class="weui-actionsheet__cell" style="padding: 2px 0 2px 0">
<h4>填写报修单</h4>
</div>
<div class="weui-cells__title" style="margin: 0 0 0 0">
<h4>选择项目和设备</h4>
</div>