수색…
매개 변수
| 속성 | 세부 |
|---|---|
| 폭 | 요소의 폭을 픽셀 단위로 설정합니다. |
| 신장 | 요소의 높이를 픽셀 단위로 설정합니다. |
<source> | 오디오 또는 비디오 파일의 리소스를 정의합니다. |
| 선로 | 미디어 요소의 텍스트 트랙을 정의합니다. |
| 통제 수단 | 디스플레이 컨트롤 |
| 자동 재생 | 자동으로 미디어 재생 시작 |
| 고리 | 반복 된 주기로 미디어를 재생합니다. |
| 음소거 된 | 소리없이 미디어 재생 |
| 포스터 | 비디오가로드 될 때까지 표시 할 이미지를 지정합니다. |
비고
브라우저 지원
| 특색 | 크롬 | Firefox (도마뱀) | 인터넷 익스플로러 | 오페라 | 원정 여행 |
|---|---|---|---|---|---|
| 기본 지원 | 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의 보비스 | (예) | 4.0 (2.0) | 지원하지 않습니다 | 10.60 | 3.1 |
<audio> : MSE를 통해 WebM에서 Vorbis / Opus 스트리밍 | ? | 36.0 | ? | ? | ? |
<audio> : Ogg의 보비스 | (예) | 3.5 (1.9.1) | 지원하지 않습니다 | 10.50 | 지원하지 않습니다 |
<audio> : MP3 | (예) | (예) | 9.0 | (예) | 3.1 |
<audio> : MP4의 MP3 | ? | ? | ? | ? | (예) |
<audio> : MP4의 AAC | (예) | (예) | 9.0 | (예) | 3.1 |
<audio> : 오그의 오푸스 | 27.0 | 15.0 (15.0) | ? | ? | ? |
<video> : VPM과 Vorbis의 WebM | 6.0 | 4.0 (2.0) | 9.0 | 10.60 | 3.1 |
<video> : VP9와 웹의 Opus | 29.0 | 28.0 (28.0) | ? | (예) | ? |
<video> : MSE를 통한 웹 스트리밍 | ? | 42.0 (42.0) | ? | ? | ? |
<video> : 오골의 테오 라와 보비스 | (예) | 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> 요소를 사용하여 비디오 / 오디오 내용을 문서에 포함합니다. 비디오 / 오디오 요소는 하나 이상의 비디오 / 오디오 소스를 포함합니다. 소스를 지정하려면 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는 웹 페이지에 오디오 파일을 삽입하는 새로운 표준을 제공합니다.
<audio> 요소를 사용하여 페이지에 오디오 파일을 포함시킬 수 있습니다.
<audio controls>
<source src="file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
비디오
<video> 요소를 사용하여 웹 페이지에 비디오를 퍼갈 수 있습니다.
<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는 비디오를로드 할 수없는 경우 대체 기능을 제공합니다. 동영상의 첫 번째 프레임을 poster 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
