HTMLのcapture属性を試す

1. このページの目的

HTML属性: capture | MDN に載っているコードを試す。

このページは、スマートフォンでアクセスしてください。

2. capture属性について

capture 属性は、オプションとして、新しいファイルをキャプチャすることと、 accept 属性で定義された種類の新しいメディアをどの機器でキャプチャするかを指定します。

値としては、 user と environment があります。 capture 属性は file 入力型が対応しています。

capture 属性は、 accept 属性が画像や動画データの入力に使用するカメラの種類を指定する文字列を値とするものです。

引用元：HTML 属性: capture - HTML: HyperText Markup Language | MDN

capture属性

3. デモ

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>

4. 参考