H5調用手機的相機/攝像/錄音等功能 _input:file的capture屬性說明


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"

 

51220網站目錄 https://www.51220.cn

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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM