A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/ja/docs/Web/HTML/Reference/Attributes/capture below:

HTML 属性: capture - HTML

HTML 属性: capture

Limited availability

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

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

capture 属性は、accept 属性が入力の種類を示す場合、画像やビデオデータの取り込みに使用するカメラを指定する文字列をその値として受け取ります。

値 説明 user ユーザー側のカメラやマイクを使用します。 environment 外向きのカメラやマイクを使用します。

メモ: capture は、以前は論理属性で、存在する場合、ファイル入力を要求する代わりに、カメラやマイクなどの機器のメディアキャプチャ機器を使用するように要求していました。

試してみましょう
<label for="selfie">あなたの顔の写真を撮りましょう:</label>

<input type="file" id="selfie" name="selfie" accept="image/*" capture="user" />

<label for="picture">背面カメラを使って写真を取りましょう:</label>

<input
  type="file"
  id="picture"
  name="picture"
  accept="image/*"
  capture="environment" />
label {
  display: block;
  margin-top: 1rem;
}

input {
  margin-bottom: 1rem;
}
例

ファイル入力型に設定すると、マイクやカメラを搭載した OS では、既存のファイルから選択したり、新規にファイルを作成したりできるユーザーインターフェイスが表示されます。

<p>
  <label for="soundFile">あなたの声はどのような音ですか?:</label>
  <input type="file" id="soundFile" capture="user" accept="audio/*" />
</p>
<p>
  <label for="videoFile">動画をアップロード:</label>
  <input type="file" id="videoFile" capture="environment" accept="video/*" />
</p>
<p>
  <label for="imageFile">自分の写真をアップロードしてください:</label>
  <input type="file" id="imageFile" capture="user" accept="image/*" />
</p>

なお、これらはモバイル端末でより効果的に機能します。お使いの端末がデスクトップコンピューターの場合、一般的なファイルピッカーが表示されるでしょう。

仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4