HTML5 - 190602 Basic Study 4

1. 멀티미디어 관련 태그

<embed src="media/baby.MP4" width="150" height="150"></embed>
<object data="media/Fireworks.mp4" width="200" height="200"></object>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oCJyeyW8g2c" frameborder="0" allow="accelerometer;
autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe src="media/Wildlife.mp4" width="200" height="200"></iframe>

embed 파라미터>

1) 트래커, 컨트롤 바 보이기: showcontrols=true(디폴트),

(showtracker: 트랙커, showaudiocontrols: 볼륨콘트롤, showpositioncontrols: 이전 곡, 다음 곡 버튼 등으로 세부 설정도 가능)

2) 바로가기 보이기: showgotobar=true

3) 파일정보 보이기: showdisplay=true

4) 상황선 보이기: showstatusbar=true

5) 자동 시작: autostart=true(디폴트)

6) 재생 횟수: loop=1(디폴트), loop=3(3회 반복 재생), loop=0(무한 반복)

7) 재생 볼륨: volume=-6000(디폴트), volume 값은 -10000~0 사이의 값을 갖는다.

8) 좌우 밸런스: balance=0(디폴트), 밸런스 값은 -10000~10000 사이의 값을 갖는다.

9) 플레이어 감추기: hidden=false(디폴트)

10) 메뉴 금지: enablecontextmenu=false(디폴트), 오른쪽 마우스를 사용할 수 없도록 한다.

11) 전체화면금지 : allowFullScreen=false(기본값)

2. 오디오 태그

<audio src="media/Kalimba.mp3" controls></audio>
<audio controls autoplay="true" preload="auto" loop muted>
   <source src="media/Kalimba.ogg" type="audio/ogg">
    <source src="media/Kalimba.mp3" type="audio/mp3">
</audio>

오디오 태그 속성>

1) src : 음악 파일의 경로

2) preload : 음악을 재생하기 전 모두 불러오기

3) autoplay : 자동재생

4) loop : 반복재생

5) controls : 재생도구 출력

웹 브라우저 지원>

1) mp3 : IE / Chrome / Safiri

2) ogg : Chorme / FireFox / Safiri / Operea

3) wav : Chorme / FireFox / Operea

3. 비디오 태그

<video controls width="300" height="300" preload="auto" poster="img/1.png">
   <source src="media/Wildlife.webm" type="video/webm">
    <source src="media/Wildlife.mp4" type="video/mp4">
</video>

<video poster="http://placehold.it/640x360" width="640" height="360" controls>
   <source src="Wildlife.mp4" type="video/mp4" />
   <source src="Wildlife.webm" type="video/webm" />
</video>

웹 브라우저 지원>

1) mp4 : IE / Chrome / Safiri

2) webm : Chorme / FireFox / Operea

3) ogv : Chorme / FireFox / Operea

비디오 태그 속성>

1) src : 비디오 파일의 경로

2) preload : 비디오를 재생하기 전 모두 불러오기

3) autoplay : 자동재생

4) loop : 반복재생

5) controls : 재생도구 출력

6) poster : 썸네일

7) width : 너비

8) height : 높이

9) muted : 음소거

4. 자막 삽입 태그

<video width="640" height="360" controls>
   <source src="Wildlife.mp4" type="video/mp4" />
   <source src="Wildlife.webm" type="video/webm" />
   <track kind="subtitles" src="track.srt" srclang="ko" label="Korean" />
   <track kind="subtitles" src="track.srt" srclang="en" label="English" />
   <track kind="subtitles" src="track.srt" srclang="jp" label="Japanese" />
   <track kind="subtitles" src="track.srt" srclang="ch" label="Chinese" />
</video>

5. iframe 태그

<a href="http://www.daum.net" target="iframe">다음</a><br>
<a href="http://www.nate.com" target="iframe">네이트</a><br>
<iframe src="" width="500" height="500" name="iframe"></iframe>

iframe 태그 속성

1) align : 내용의 정렬 방향을 기술한다.

- 세로 방향 값 : bottom , middle, top,가로

- 가로 방향 값 :right, left

2) frameborder : 프레임 보더의 사용여부 기술한다.

- 값은  : yes, no,1, 0

3)height : 프레임을 높이를 기술한다.

- 단위 : 픽셀 혹은 전체 화면 대비 비율

4) width : 프레임을 폭을 기술한다.

-  단위 : 픽셀 혹은 전체 화면 대비 비율

5) marginheight : 프레임의 보더와 내용 사이의 세로 마진을 기술한다.

6) marginwidth : 프레임 보더와 내용 사이의 가로 마진을 기술한다.

7) name : 프레임을 고유한 이름을 할당한다.

8) scrolling : 프레임에서 스크롤 바를 사용할지 여부를 기술한다.

- 값은 : yes, no, auto

9) src : 프레임 내에 포함시킬 HTML 문서나 서블릿의 주소를 기술한다.