HTML5 - 멀티미디어 태그
반응형
HTML5에서 새롭게 추가된 멀티미디어 태그에 대해.
video, audio, embed (플러그인 다운로드)
ActiveX, 각종 플러그인을 설치하여 불편함과 보안 위협에 노출되어 있습니다.
HTML5에선 이런 문제를 해결하기 위해 브라우저 자체에서 동영상을 감상하고 음악을 들을 수 있게 각종 미디어 태그가 추가되었습니다.
VIDEO
지원
| IE | Crome | Firefox | Opera | Safari | |
| mp4 | IE9이상 지원 | 지원 | 미지원 | 미지원 | 지원 |
| ogg | 미지원 | 지원 | 지원 | 지원 | 미지원 |
| webM | 미지원 | 지원 | 지원 | 지원 | 미지원 |
사용법
<video src="movie.mp4" width="360" height="240"></video>브라우저가 <video> 요소를 만나면 <source>에 지정된 비디오 파일과 오디오 파일이 담긴 컨테이너들을 읽어들여 재생할 수 있는 첫 번째 파일을 재생한다. 이는 source에 지정된 type 속성을 통해 가능하다.
<video width="360" height="240" controls autoplay preload="auto">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogg">
<source src="movie.webm" type="video/webm">
<p> 현재 사용하고 있는 브라우저는 비디오 태그를 지원하지 않습니다.(대체 콘텐츠) </p>
</video>
대체 텍스트 <p> 요소대신 <object>나 <embed>를 사용하여 플래시 파일을 링크시켜도 된다. 혹은 웹상에서 플레이 되지 못하면 다운로드 받는 형식으로라도 표현한다.
<video width="360" height="240" controls autoplay preload="auto">
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"'>
<object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=movie.mp4">
<param name="movie" value="player.swf?file=movie.mp4">
<a href="movie.mp4">movie 다운로드 받기</a>
</object>
</video>전체 구문
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<video src="동영상이름.mp4" type="video/mp4" controls="controls"></video>
<video controls="controls">
<source src="동영상이름.mp4" type="video/mp4" />
</video>
</body>
</html>AUDIO
| IE | Chrome | Firefox | Opera | Safari | |
| mp3 | 9.0부터 지원 | 지원 | 미지원 | 미지원 | 지원 |
| ogg | 미지원 | 지원 | 지원 | 지원 | 미지원 |
audio 태그는 전반적으로 video 태그와 사용법이 같다. 대체 콘텐츠를 삽입할 수 있으며 여러가지 속성을 부여할 수 있다.
<audio controls>
<source src="sound.ogg" type="audio/ogg">
<source src="sound.mp3" type="audio/mpeg">
<object type="application/x-shockwave-flash" data="player.swf?soundFile="sound.mp3">
<param name="movie" value="player.swf?soundFile="sound.mp3">
<a href="sound.mp3">sound download</a>
</object>
</audio>속성값으로는 src, autoplay, controls, loop, preload가 있다.
EMBED 태그 사용법
embed 태그는 브라우저에 설치되어 있는 플러그인이 필요한 파일을 동작할 때 사용하는 태그로서, 관련 플러그인이 설치되어 있지 않다면 다운로드받을 수 있게 메세지를 띄울수 있다.
<embed src="파일경로.swf" width="550" height="400"></embed>
반응형
'IT > 소프트웨어' 카테고리의 다른 글
| HTML5 - 레이아웃 구성 태그 div, span 및 시멘택 태그 header, nav, section, footer (0) | 2019.07.08 |
|---|---|
| HTML5 - 폼 태그 및 GET 방식과 POST 방식 (0) | 2019.07.08 |
| HTML5 - 태그 설명 (0) | 2019.07.08 |
| HTML5 - 시작 및 HTML5 표준 코딩 규칙 (2) | 2019.07.08 |
| 아톰 편집 프로그램 Atom 패키지 (0) | 2019.07.05 |
댓글