<HTML5+CSS3> 플러그인 없이 사용하기 외 태그들

HTML5에서 비디오 파일이나 오디오 파일을 어떻게 재생하는지 그 태그들을 알아보자 !

인코딩: 캠코더 및 휴대폰등 여러 장치를 이용해 비디오를 촬영해 원본 비디오를 압축해 컴퓨터에서 사용할수 있는 비디오 파일로 변환하는 과정

디코딩:비디오 파일에 저장되어 있는 비디오 정보를 가져와서 비디오 플레이어에 보여주는 과정

코덱:인코딩과 디코딩을 수행하는 것 대표적으로 WMV(Windows Media Video)라는 코덱은 원본 비디오를 윈도우의 윈도우 미디어 플레이어로 볼 수 있도록 변환해 준다.

<video>태그- HTML5와 비디오

-HTML5에서 비디오태그를 이용해서 쉽게 웹 문서에 비디오 파일을 넣을 수 있다.

EX)<video src="비디오 파일 경로" [속성] [속성="속성 값"]>

예를들어, HTML5 브라우저에서만 재생할 수 있는 gate.mp4파일을 다음과 같은 소스로 웹 문서에 간단히 삽입할 수 있다. (p194.) controls속성을 이용해 비디오에 컨트롤 막대가 표시되도록 해야 재생이나 일지정지가 편리하다.

관련 ovg등 html5하위 버전 및 인터넷 익스플로어등 동영상을 변환하는 것을 참조하려면 (202pg)

<audio>태그 - 오디오 파일 삽입

-HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때도 <audio>태그를 사용합니다.

EX) <audio src="오디오 파일 경로" [속성] [속성="속성값"]>

mp3파일을 문서에 삽입하려면 다음과 같은 소스를 사용하면 된다. 화면상에서 오디오를 재생하거나 멈출 수 있도록 controls 속성을 추가했다.  

ex) <audio src="od.mp3" controls> ... </audio>

오디오 파일 형식 역시 표준이 정해져 있지 않아 각 브라우저에 알맞은 형식으로 변환해야 한다.

HTML5와 오디오 코덱

-오디오 파일도 여러 가지 코덱을 이용해 인코딩할 수 있는데 각 브라우저에 따라 사용하는 코덱이 달라진다 따라서 

인터넷 익스플로어를 제외한 오페라,크롬,파이어폭스 브라우저에서 실행이 되게 하려면oga파일과 ogg파일을 최소한 mp3파일과 oga파일, ogg파일을 동시에 갖추고 있어야한다 그리고 <source>태그를 이용해 이 파일들을 지정한다.

EX)<audio controls>

<source src="od.mp3" type="audio/mp3">

<source src="od.oga" type="audio/vorbis">

    </audio>

% type속성은 생략 가능

<audio>태그와 <vidio>태그의 속성

-오디오 태그와 비디오 태태그에서 사용할 수 있는 속성은 거의 일치하기 때문에 함께 소개하겠다.

1.controls속성

-컨트롤 속성을 함께 표시. 따로 속성 값이 없다.

2.preload속성

-재생전에 오디오 파일을 모두 다운로드할 것인지 또는 일부 정보만 다운로드 할 것인지 여부를 지정한다.

속성값은 다음과 같다

2-(1) none:이 옵션을 선택하면 미리 다운로드해 놓지 않고 재생 버튼을 눌러야 다운시작.

EX)<audio controls preload="none">

<source src="old.mp3">

     </audio>

2-(2) metadata:미디어 파일은은 즉시 사용하지 않을 것이라고 생각해서 미디어 파일 전체를 다운로드 하지 않고 메타 정보만 다운한다.

EX)

<audio controls preload="metadata">

<source src="old.mp3">

     </audio>

2-(3) auto: 이 속성이 들어간 페이지가 펼쳐지면 즉시 이용하게끔 전체 다운을 한다. 단 다운로드가 끝나도 사용자가 재생 튼을 눌러야 재생 속성값 X preloda라고 지정하면 auto값을 기본

EX)

<audio controls preload="auto">

<source src="old.mp3">

     </audio>

3.autoplay속성

-비디오나 오디오 파일을 다운롣로드 하자마자 재생. 모바일 기기에서는 자동재생 X

4.loop속성

-미디어 파일 재생이 끝났을 때 파일의 맨 앞으로 되돌아가서 다시 재생.

ex)<video with="450" height="300" controls autoplay loop>

<source src="ddd.ogv" type="video/ogg">

</viode>

<source>태그- 여러 미디어 파일 한꺼번에 지정하기

-이 태그는 <source>뿐이다.

앞서 설명한 것처럼,브라우저에 따라 지원하는 오디오 코덱이나 비디오 코덱이 달라 지원하지 않는 경우가 발생할수도있다. 예를들어 mp4형식의 비디오 파일만 가지고 있고 이 파일을 웹 문서에 넣었을 경우,mp4를 지원하지 않는 브라우저에서는 비디오를 재생할 수 없다.

<source>태그의 속성

-소소스 태그에서는 미디어 파일의 경로를 지정하는 src속성과 미디어 파일의 형식을 알려주는 type속성을 사용한다.

src속성은 미디어 파일의 경로를 지정하는 필수 속성이고 파일 경로를 지정할 때 경로에 공백이 있어서는 안된다.

type속성은 웹 브라우저가 해당 미디어 파일을 재생할 수 있는지 확인할 수 있도록 미디어 파일의 유형을 알려주는 속성

미디어 파일을 사용할 때, 사용자의 로컬 컴퓨터에서는 문제없이 재생되짐지만 웹 서버에 업로드한 후에 재생되지 않는 경우가 있는데 이는 ogv파일이나 webm파일 등은 이전에는 없었던 비디오 파일이기 때문에 웹 서버에서 확장자를 인식하지 못했기 때문이다 따라서 MIME유형을 추가 해야하는데 웹 서버 관리자에게 요청하면 된다.

type에 추가한다

EX)video/ogg      =.ogv

     video/mp4    =.mp4

video/webm  =.webm

=<video width="450" height="300" controls>

<source src="gate.ogv" type="video/ogg">

</video>

이런식으로 type에 추가한다 mp4,webm 둘다 추가하면 됨.