HTML 屬性:capture
capture 屬性指定是否(可選)應捕獲新檔案,以及應使用哪個裝置來捕獲由 accept 屬性定義的特定型別的新媒體。
值包括 user 和 environment。capture 屬性支援 file 輸入型別。
如果 accept 屬性指示輸入應該是這些型別之一,則 capture 屬性的值是一個字串,用於指定用於捕獲影像或影片資料的攝像頭。
| 值 | 描述 |
|---|---|
使用者 |
應使用使用者正面的攝像頭和/或麥克風。 |
environment |
應使用面向外部的攝像頭和/或麥克風。 |
注意:capture 之前是一個布林屬性,如果存在,則要求使用裝置的媒體捕獲裝置(如攝像頭或麥克風)而不是請求檔案輸入。
試一試
<label for="selfie">Take a picture of your face:</label>
<input type="file" id="selfie" name="selfie" accept="image/*" capture="user" />
<label for="picture">Take a picture using back facing camera:</label>
<input
type="file"
id="picture"
name="picture"
accept="image/*"
capture="environment" />
label {
display: block;
margin-top: 1rem;
}
input {
margin-bottom: 1rem;
}
示例
當在檔案輸入型別上設定時,具有麥克風和攝像頭的作業系統將顯示一個使用者介面,允許從現有檔案中選擇或建立新檔案。
html
<p>
<label for="soundFile">What does your voice sound like?:</label>
<input type="file" id="soundFile" capture="user" accept="audio/*" />
</p>
<p>
<label for="videoFile">Upload a video:</label>
<input type="file" id="videoFile" capture="environment" accept="video/*" />
</p>
<p>
<label for="imageFile">Upload a photo of yourself:</label>
<input type="file" id="imageFile" capture="user" accept="image/*" />
</p>
請注意,這些在移動裝置上效果更好;如果您的裝置是臺式電腦,您很可能會看到一個典型的檔案選擇器。
規範
| 規範 |
|---|
| HTML 媒體捕獲 # dfn-capture |
瀏覽器相容性
載入中…