H5调用手机的相机/摄像/录音等功能 _input:file的capture属性说明

时间: 2018-03-07阅读: 4324标签: 摄像

H5使用input标签调用系统默许相机,摄像,录音功能。使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能:

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">

capture表示可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。如果需要设备的面向用户的摄像头拍摄可以使用capture="user"



input:file标签还支持一个multiple属性,表示可以支持多选,如:

<input type="file" accept="image/*" multiple>

加上这个multiple后,capture就没啥用了,因为multiple是专门用来支持多选的。


例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>input视频测试</title>
</head>

<body>
<!--拍照 <input id="myfile" type="file" name="file" accept="image/*" capture="camera"> -->
//拍视频
<input type="file" name="video" id="video-input" accept="video/*" capture="user"  onchange="videoChange()" />
<span id='info'></span>
</p>
<video id="video" width='300' height="300" controls autoplay></video>

<script type="text/JavaScript">
function videoChange() {
var file = document.getElementById('video-input').files[0];
var fileSize = (Math.round(file.size / 1024)).toFixed();
document.getElementById('info').innerHTML += "所录视频大小约为:" + (fileSize / 1024).toFixed(2) + "Mb";

var url = URL.createObjectURL(file);
console.log(url);
document.getElementById("video").src = url;
}
</script>
</body>

</html>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/478

关闭

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!