サーチ…
パラメーター
| 属性 | 詳細 |
|---|---|
| 幅 | 要素の幅をピクセル単位で設定します。 |
| 高さ | 要素の高さをピクセル単位で設定します。 |
<source> | オーディオファイルまたはビデオファイルのリソースを定義します。 |
| トラック | メディア要素のテキストトラックを定義する |
| コントロール | コントロールを表示する |
| 自動再生 | メディアの再生を自動的に開始する |
| ループ | 繰り返しのサイクルでメディアを再生する |
| ミュートされた | 音声なしでメディアを再生する |
| ポスター | ビデオが読み込まれるまで表示する画像を割り当てます。 |
備考
ブラウザーでのサポート
| 特徴 | クロム | Firefox（Gecko） | インターネットエクスプローラ | オペラ | サファリ |
|---|---|---|---|---|---|
| 基本的なサポート | 3.0 | 3.5（1.9.1） | 9.0 | 10.50 | 3.1 |
<audio> ：WAVEのPCM | （はい） | 3.5（1.9.1） | サポートなし | 10.50 | 3.1 |
<audio> ：WebMのVorbis | （はい） | 4.0（2.0） | サポートなし | 10.60 | 3.1 |
<audio> ：MSEを介したWebMでのVorbis / Opusのストリーミング | ？ | 36.0 | ？ | ？ | ？ |
<audio> ：OggのVorbis | （はい） | 3.5（1.9.1） | サポートなし | 10.50 | サポートなし |
<audio> ：MP3 | （はい） | （はい） | 9.0 | （はい） | 3.1 |
<audio> ：MP4のMP3 | ？ | ？ | ？ | ？ | （はい） |
<audio> ：MP4のAAC | （はい） | （はい） | 9.0 | （はい） | 3.1 |
<audio> ：OggのOpus | 27.0 | 15.0（15.0） | ？ | ？ | ？ |
<video> ：Web8のVP8とVorbis | 6.0 | 4.0（2.0） | 9.0 | 10.60 | 3.1 |
<video> ：Web9のVP9とOpus | 29.0 | 28.0（28.0） | ？ | （はい） | ？ |
<video> ：MSE経由でWebMをストリーミングする | ？ | 42.0（42.0） | ？ | ？ | ？ |
<video> ：OggのTheoraとVorbis | （はい） | 3.5（1.9.1） | サポートなし | 10.50 | サポートなし |
<video> ：MP4のH.264とMP3 | （はい） | （はい） | 9.0 | （はい） | （はい） |
<video> ：MP4のH.264とAAC | （はい） | （はい） | 9.0 | （はい） | 3.1 |
| その他の形式 | サポートなし | サポートなし | サポートなし | サポートなし | 3.1 |
`
HTMLまたは<audio>要素を使用して、ビデオ/オーディオコンテンツをドキュメントに埋め込みます。ビデオ/オーディオ要素は、1つまたは複数のビデオ/オーディオソースを含む。ソースを指定するには、src属性または<source>要素を使用します。ブラウザは最も適したものを選択します。
オーディオタグの例：
<!-- Simple video example -->
<video src="videofile.webm" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.webm">download it</a>
and watch it with your favorite video player!
</video>
<!-- Video with subtitles -->
<video src="foo.webm">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>
<!-- Simple video example -->
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
Your browser doesn't support HTML5 video tag.
</video>
オーディオタグの例：
<!-- Simple audio playback -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
<!-- Audio playback with captions -->
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>
オーディオ
HTML5は、Webページにオーディオファイルを埋め込むための新しい標準を提供します。
<audio>要素を使用して、ページにオーディオファイルを埋め込むことができます。
<audio controls>
<source src="file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
ビデオ
<video>要素を使用して、Webページにビデオを埋め込むこともできます。
<video width="500" height="700" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
ビデオヘッダーまたは背景
ループ上で自動再生され、コントロールやサウンドがないビデオを追加する。ビデオヘッダーや背景に最適です。
<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
</video>
このCSSは、ビデオを読み込めない場合のフォールバックを提供します。 videoの最初のフレームをpost video.jpgとして使用することをお勧めします。
#videobg {
background: url(video.jpg) no-repeat;
background-size: cover;
}
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow