HTML5 Multimedia

July 28, 2022

🟡 Video Elements

- src : 비디오 자원의 경로지정 <source>사용시 생략
- width : 표시되는 요소의 넓이
- height : 표시되는 요소의 높이
- poster : 포스터 이미지를 지정함(영상이 없을때 보여지는 이미지) → ex / 유튜브 썸네일
- controls : 컨트롤 패널을 표시함.
- autoplay : 로드되면 자동 재생함
- loop : 반복 재생함. 무한재생 ( 'loop="3"'의 형태로 입력하면 재생 횟수 제한 가능)
- muted : 음소거
- preload : 영상의 일부를 일단 먼저 불러와 재생을 하면서 동시에 조금씩 영상을 다운로드 해주는 기능!
(대부분의 ott플랫폼들이 해당 기능 사용.)

<style>
 *{margin:0; padding:0}
 .movie{width:640px; height:360px; border:2px solid #ccc; padding:10px}
</style>
<section class="movie">
 <video src="movie/movie1.mp4" autoplay="autoplay">
</section>

<section class="movie">
     <video src="./movie/movie1.mp4" controls="controls"
            autoplay="autoplay" muted preload="auto" poster="./images/po.jpg">
</section>

type : 비디오 코덱 정보를 지정.
비디오 파일 종류 : .mp4 / .avi / .wmf / .mkv / .mov / .ogv / .webm / .flv / .f4v 등

브라우저 별 지원 비디오 코덱
1. 크롬 : WebM(.webm) / Ogg/Theora(.ogv) / HEVC/H.264(.mp4)
2. 파이어폭스 : WebM(.webm) / Ogg/Theora(.ogv)
3. 사파리 : WebM(.webm) / HEVC/H.264(.mp4)
4. 오페라 : WebM(.webm) / Ogg/Theora(.ogv) / HEVC/H.264(.mp4)
5. 엣지 : WebM(.webm) / Ogg/Theora(.ogv) / HEVC/H.264(.mp4)
6. IE : HEVC/H.264(.mp4)
7. 웨일 : WebM(.webm) / Ogg/Theora(.ogv) / HEVC/H.264(.mp4)

→ 인코딩 할 때 mp4(H.264)로 영상 파일 업로드 해야 함

📍 Source Element를 쓰는 경우

코덱이 다른 영상을 불러올때 불러오는 브라우저에서의 지원여부에 따라 플레이가 결정된다. 따라서 여러 개의 영상을 불러오더라도 지원이 되는 영상만 플레이가 되고 나머지는 무시된다. 크롬 브라우저의 경우 두개의 영상을 모두 지원하지만 먼저 지정된 영상이 플레이가 되면 뒤에 불려지는 영상은 플레이 되지 않고 무시된다.
만약에 브라우저가 영상을 지원하지 않을경우(IE8등) 대체 요소를 지정할 수 있습니다.

  <p id="fullback">
      <a href="source/area88.mp4">비디오 파일 다운로드</a>
  </p>

다른 해상도의 비디오를 제공할 경우에도 사용된다.(모바일기기에 지원할 경우 등..) media속성을 사용하여 모바일 기기및 해상도를 필터링 하여 서비스 할 수 있다.

  <section class="movie">
      <video controls="controls" poster="images/po.jpg">
          <source src="movie/movie1.mp4" type="video/mp4">
          <source src="movie/movie1.ogv" type="video/ogg">
          <source src="movie/movie1.webm" type="video/webm">
      </video>
  </section>

🟡 Audio Elements

- src : 오디오 자원의 경로지정 <source>사용시 생략
- width : 표시되는 요소의 넓이
- height : 표시되는 요소의 높이
- controls : 컨트롤 패널을 표시함.
- autoplay : 로드되면 자동 재생함
- loop : 반복 재생함.

  <section>
      <audio src="./sound/bass.mp3" controls></audio>
  </section>

Firefox는 .ogg 파일이고, Webkit 기반 브라우저는 .mp3 를 지원합니다..
IE는 현재 지원않습니다. Opera 10이하 버전은 .wav 만 지원합니다.

브라우저 별 지원 sound 코덱
1. 크롬 : .mp3 / .ogg / .wav
2. 파이어폭스 : .mp3 / .ogg / .wav
3. 사파리 : .mp3 / .ogg / .wav
4. 오페라 : .mp3 / .ogg / .wav
5. 엣지 : .mp3 / .ogg / .wav
6. IE : .mp3
7. 웨일 :

📍 만약 브라우저에서 해당 코덱을 지원하지 않을 시 다른 파일로 대체 가능하도록 지정하는 방법.

→ 고음질의 파일을 상단 우선 배치

  <article class="sample">
      <audio id="bass" controls>
          <source src="sound/bass.ogg" type="audio/ogg">
          <source src="sound/bass.mp3" type="audio/mpeg">
          <!-- <source src="sound/bass.mp3" type="audio/mpeg"> -->
      </audio>
  </article>