미디어의 표준화, <audio>, <video>
HTML5 이전까지는 오디오나
비디오를 재생하기 위해
브라우저에 적절한 플러그인
소프트웨어를 설치해야 했다.
플러그인이란 브라우저가 처리할
수 없는 비표준 형식의 데이터를
전용으로 다루는 내장형 소프트웨어로
ActiveX가 대표적이다.
아무튼 이는 여러 문제점들을
발생시켰고,
그러한 이유로 비표준 미디어를
포함하는 웹 페이지는
브라우저에 따라 재생되지 않는
문제점이 있었다.
이런 문제를 해결하기 위해,
HTML5에서는 플러그인 없이
오디오나 비디오를
재생할 수 있도록 다음 태그를
표준화 하였다.
<auiod>, <video>
물론 플래시 애니메이션과 같이
표준화되지 않은 미디어를 재생하기
위해서는
현재도 여전히 플러그인의 설치가
필요하며,
이런 경우 다음 두 태그를 사용한다.
<embed>, <object>
11장 5절에서는 자바스크립트를
이용하여
독자의 브라우저에 어떤 플러그인이
설치되었는지 알아내는 예제가 있다.
참고하길 바란다.
플러그인이란
웹 브라우저가 모든 종류의 데이터를
해독하고 출력할 수 있는 것은 아니다.
예를 들어 플래시 데이터, PDF 데이터,
3차원 가상현실용 VRM 데이터 등
웹 브라우저가 재생할 수 없는 많은
다양한 형식의 데이터가 있다.
웹 브라우저를 통해 이들을 출력하거나
재생하고자 하면,
이들을 해석하고 출력할 수 있는
전용 프로그램이 필요하며,
웹 브라우저에 꽃혀 실행된다고 하여
이 프로그램을 플러그인이라고 한다.
Adobe사가 PDF와 플래시 플러그인을
제공하는 것처럼,
플러그인은 데이터 형식을 개발한
회사에서 개발하여 배포한다.
비디오 삽입
HTML5에서는 <video> 태그를 이용하여
다음과 같이 비디오를 삽입한다.
<video src="AttackOnTitan.mp4" width="320" height="240" controls autoplay></video>
이 태그에 의해 브라우저에는
320×240px 크기의 공간이 할당되고
AttackOnTitan.mp4가 재생된다.
autoplay 속성에 의해 비디오는
바로 재생되며,
controls 속성에 의해 비디오 제어
버튼들이 함께 출력된다.
<video></video> 사이에는
브라우저가 <video> 태그를 지원하지
않을 때 출력하는 텍스트를 지정한다.
비디오 소스는 <source> 태그를
이용하여
다음과 같이 별도로 지정할 수도 있다.
<video width="320" height="240" contorls autoplay>
<source src="AttackOnTitan.mp4" type="video/mp4">
브라우저가 video 태그를 지원하지 않습니다.
</video><video> 태그로 비디오 삽입
웹 페이지 로드 즉시 320×240 크기의 공간에 제어 버튼과 함께 비디오를 삽입하고 1회만 재생하도록 하라.
<!DOCTYPE html>
<html>
<head>
<title>비디오 삽입</title>
</head>
<body>
<h3>비디오 삽입</h3>
<hr>
<video src="media/AttackOnTitan.mp4" width="320" height="240" controls autoplay>
브라우저가 video 태그를 지원하지 않습니다.
</video>
</body>
</html> 브라우저에 따라서는 특정 타입의
비디오 파일만 인식할 수 있기 때문에,
개발자가 하나의 비디오를 여러
타입으로 만들어 두고,
브라우저가 재생 가능한 타입을
선택하도록 할 수 있다.
다음은 비디오 타입을 선택하게
하는 사례이다.
브라우저가 '.mp4'를 재생할 수
없으면 'bear.ogg'를 재생한다.
<video width="320" height="240" controls autoplay>
<source src="AttackOnTitan.mp4" type="video/mp4">
<source src="AttackOnTitan.ogg" type="video/ogg">
</video>
현재 HTML5에서 재생 가능한
비디오 타입은 다음과 같다.
<video src="비디오 파일의 URL"
width="비디오 재생 영역의 가로 길이"
height="비디오 재생 영역의 세로 길이"
controls
autoplay
muted
loop>
이 태그를 지원하지 않는 브라우저가 출력하는 메시지
</video>
<!--
width, height: 비디오가 재생될 브라우저 공간의 폭과 높이 지정. 생략되면 비디오의 원본 크기로 설정
controls: 이 속성이 설정되면 제어 버튼 출력
autoplay: 이 속성이 설정되면 비디오 로딩 즉시 재상
loop: 이 속성이 설정되면 반복 재생
muted: 오디오를 끌 때 사용
--><source src="비디오 파일의 URL"
type="비디오의 마임 타입">
<!--
type: 비디오의 마임 타입으로 다음 표의 마입 타입 지정 가능
-->
HTML5에서 사용가능한 비디오
MP4는 ISO/IEC에서 표준화한 NPEG-4의
멀티미디어 컨테이너 포맷이며,
ogg(오그)는 Xiph.Org 재단에서 개발한
멀티미디어 컨테이너 포맷이다.
이들 파일 내에는 인코딩된 오디오와
비디오가 들어있다.
WebM은 VP8, VP9 영상 코덱으로
인코딩된 비디오와
Xiph.org에서 개발하여 무료로 사용할
수 있는
Vorbis 오디오 코덱으로 인코딩한
오디오 데이터를 지정하는 포맷이다.
WebM(웹엠)은 구글의 후원을 받아
개발된, 로열티 비용 없는
고화질 압축 동영상 포맷으로
2010년 5월 19일에 처음 나왔으며,
HTML5에 사용된다.
(출처, 위키피디아)
오디오 삽입, <audio>
HTML5에서는 다음의 표에 있는
<audio> 태그를 이용하여
<audio src="오디오 파일의 URL"
controls
autoplay
loop>
이 태그를 지원하지 않는 브라우저가 출력하는 메시지
</audio>
<!--
controls: 이 속성이 설정되면 제어 버튼 출력
autoplay: 이 속성이 설정되면 오디오 로딩 즉시 재상
loop: 이 속성이 설정되면 반복 재생
-->
다음과 같이 오디오를 삽입한다.
<audio src="MyWar.mp3" controls loop></audio>
이 태그는 웹 페이지가 출력될
때 자동으로(autoplay)
MyWar.mp3를 반복 재생(loop)
하고
제어 버튼(controls)을 함께
출력하도록 지시한다.
<audio></audio> 사이에는
브라우저가
<audio> 태그를 지원하지 않을 때
출력하는 대체 텍스트를 지정한다.
controls 속성을 생략하면 브라우저
화면에는 아무것도 나타나지 않고
오디오 파일만 재생되며,
autoplay가 생략되면, 오디오가
자동으로 시작되지 않는다.
자바스크립트를 이용하면 오디오
재생을 제어할 수 있다.
<audio> 태그와 모바일 브라우저
모바일 브라우저에서는 보안상의
이유로
<audio> 태그의 autoplay는
작동하지 않는다.
사용자가 브라우저에서 play
컨트롤을 선택해야
오디오 플레이(재생)가 가능하다.
<video> 태그에서와 마찬가지로
<source> 태그를 이용하면 다음과
같이 mp3 타입과 ogg 타입 중
브라우저가 재생 가능한 타입을
선택할 수 있다.
<audio controls autoplay>
<source src="MyWar.mp3" type="audio/mp4">
<source src="MyWar.ogg" type="audio/ogg">
</audio>
브라우저가 MyWar.mp3를 재생할
수 없으면 MyWar.ogg를 재생한다.
<audio> 태그로 재생 가능한
오디오 타입은 다음과 같다.
<audio>태그의 autoplay 속성
크롬이나 모바일 브라우저에서는
보안상의 이유로
<audio> 태그의 autoplay는
작동하지 않는다.
사용자가 브라우저에 출력된
play 컨트롤을 클릭해야
오디오 파일이 재생된다.
<audio> 태그로 오디오 삽입
웹 페이지 로드 즉시 연주되어 무한반복 되도록 오디오를 삽입하라. 제어 버튼이 보이도록 하라.
<!DOCTYPE html>
<html>
<head>
<title>오디오 삽입</title>
</head>
<body>
<h3>오디오 삽입</h3>
<hr>
페이지 로드 즉시 음악이 재생됩니다.
<audio src="MyWar.mp3" controls autoplay loop>
브라우저가 audio 태그를 지원하지 않습니다.
</audio>
</body>
</html>참고 및 출처
 |
|
