Skip to content

HTML5 Multimedia

  • Web
  • Html
  • Media

July 28, 2022

HTML5 Multimedia

🟑 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λ₯Ό μ“°λŠ” 경우

  1. 코덱이 λ‹€λ₯Έ μ˜μƒμ„ λΆˆλŸ¬μ˜¬λ•Œ λΆˆλŸ¬μ˜€λŠ” λΈŒλΌμš°μ €μ—μ„œμ˜ 지원여뢀에 따라 ν”Œλ ˆμ΄κ°€ κ²°μ •λœλ‹€. λ”°λΌμ„œ μ—¬λŸ¬ 개의 μ˜μƒμ„ λΆˆλŸ¬μ˜€λ”λΌλ„ 지원이 λ˜λŠ” μ˜μƒλ§Œ ν”Œλ ˆμ΄κ°€ 되고 λ‚˜λ¨Έμ§€λŠ” λ¬΄μ‹œλœλ‹€. 크둬 λΈŒλΌμš°μ €μ˜ 경우 λ‘κ°œμ˜ μ˜μƒμ„ λͺ¨λ‘ μ§€μ›ν•˜μ§€λ§Œ λ¨Όμ € μ§€μ •λœ μ˜μƒμ΄ ν”Œλ ˆμ΄κ°€ 되면 뒀에 λΆˆλ €μ§€λŠ” μ˜μƒμ€ ν”Œλ ˆμ΄ λ˜μ§€ μ•Šκ³  λ¬΄μ‹œλœλ‹€.
  2. λ§Œμ•½μ— λΈŒλΌμš°μ €κ°€ μ˜μƒμ„ μ§€μ›ν•˜μ§€ μ•Šμ„κ²½μš°(IE8λ“±) λŒ€μ²΄ μš”μ†Œλ₯Ό μ§€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  <p id="fullback">
      <a href="source/area88.mp4">λΉ„λ””μ˜€ 파일 λ‹€μš΄λ‘œλ“œ</a>
  </p>
  1. λ‹€λ₯Έ ν•΄μƒλ„μ˜ λΉ„λ””μ˜€λ₯Ό μ œκ³΅ν•  κ²½μš°μ—λ„ μ‚¬μš©λœλ‹€.(λͺ¨λ°”일기기에 지원할 경우 λ“±..) 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>
  • 단 3번째 쀄에 μœ„μΉ˜ν•œ download μ˜΅μ…˜μ€ μ €μž‘κΆŒ λ¬Έμ œκ°€ λ°œμƒ ν•˜λ―€λ‘œ μ ˆλŒ€ μ‚¬μš©ν•˜μ§€ μ•Šλ„λ‘ ν•œλ‹€!
Previous Post

HTML5의 μƒˆλ‘œμš΄ 속성

HTML5의 μƒˆλ‘œμš΄ 속성
Next Post

λ¦¬μŠ€νŠΈμ΄λ―Έμ§€(2) - μ—°ν˜

λ¦¬μŠ€νŠΈμ΄λ―Έμ§€(2) - μ—°ν˜

Β© 2023 Haeun Choi

  • Github
  • Contact