<video> 태그
웹 브라우저를 통해 동영상을 재생하기 위한 HTML코드. 각 브라우저 마다 지원 코덱이 달라 같은 동영상이라도 재생이 되는 브라우저와 안되는 브라우저가 있다.
이를 위해, 다른 포멧의 동영상 저장 경로를 모두 지정해두어 다른 브라우저에서도 볼 수 있도록 하는 방법을 사용하고 있다.
|
속성 |
내용 | ||
|
controls |
각 브라우저 고유의 컨트롤 바 표시 | ||
|
autoplay |
동영상 파일이 로드되는 즉시 자동으로 재생 | ||
|
loop |
동영상 재생이 끝나면 처음부터 다시 반복. 재생횟수 지정 | ||
|
src |
동영상 파일 경로 | ||
|
poster |
재생할 동영상이 로드 중이거나 버퍼링 중일때 보일 이미지 | ||
|
preload |
동영상 파일을 다운로드하여 재생하는 방식 | ||
|
auto:자동 다운로드 none:사용자가 컨트롤을 조작할 때까지 다운 금지 metadata:메타데이터를 가져오며 사용자가 컨트롤을 조작하면 비디오 부분 다운 | |||
|
width |
동영상의 폭(너비) | ||
| height | 동영상의 높이 |
예.
|
<!DOCTYPE HTML> <html> <head> <title>video태그 연습</title> </head> <body> <video controls autoplay preload="auto" width=300px height=200px> <source src="multi/dsc_2190.mp4" type='video/mp4;codecs="avc1.42e01e.mp4a.40.2"'> <source src="multi/dsc_2190.ogv" type='video/ogg;codecs="theora,vorbis"'> <source src="multi/dsc_2190.webm" type='video/webm;codecs="vp8,vorbis"'> </video> </body> </html> |
<audio>
audio 태그는 video태그와 사용법이 유사하다. 또한 브라우저에 따라 호환되는 파일이 다르다.
속성은 video태그에서 사용되는 width와 height를 제외한 모든 속성이 사용가능하다.
예.
|
<!DOCTYPE HTML> <html> <head> <title>오디오 예제</title> </head> <body> <audio controls="controls"> <source src="multi/danosongs.com-black-box-in-the-ground.mp3"> <source src="multi/danosongs.com-black-box-in-the-ground.ogg"> </audio> </body> </html> |
<embed>
플러그인이 설치된 브라우저 또는 플러그인이 필요한 파일을 재생할 때 사용하는 태그.
만일 플러그인이 설치되어 있지 않으면 실행되지 않는다. embed태그는 이전에도 있었던 태그이지만 보다 단순화되어 사용하기가 편리해졌다.
예.
|
<!DOCTYPE HTML> <html> <head> <title> </title> </head> <body> <embed src="multi/sample.swf"> </embed> <embed src="multi/bs-ironman.mid"> </body> </html> |
일요일은 짜빠게뤼~ 먹는날~^^