λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
[개발] Practice/HTML CSS

[HTML/CSS] HTML Video, Audio 닀루기

by Connecting-the-dots 2022. 3. 1.
728x90
λ°˜μ‘ν˜•

πŸ’‘ μ‹€μŠ΅ 포인트!

πŸ’œ VIDEO : κΈ°λ³Έ ν˜•νƒœ

<video src="./video/bridge.mp4"></video>

πŸ’œ VIDEO : μž¬μƒλ²„νŠΌ λ„£κΈ°

  • controls 속성을 λ„£μœΌλ©΄ μž¬μƒλ²„νŠΌ 생성
<video src="./video/bridge.mp4" controls></video>

πŸ’œ VIDEO : 더 λ‚˜μ€ ν˜•νƒœ

  • video νƒœκ·Έμ— src λ₯Ό λ„£λŠ” 것보닀 source νƒœκ·Έμ— src λ₯Ό λ„£λŠ” 게 ν˜Έν™˜μ„±μ— μžˆμ–΄μ„œ 더 μ’‹μŒ
  • source νƒœκ·Έλ₯Ό μ‚¬μš©ν•  λ•Œμ—λŠ” type 도 λ„£μ–΄μ£ΌλŠ” κ±Έ μΆ”μ²œ!
  • 첫 번째 source νƒœκ·Έμ˜ μ˜μƒμ΄ μ•ˆ λ‚˜μ˜¬ 것을 λŒ€λΉ„ν•˜μ—¬ 두 번째 source νƒœκ·Έλ₯Ό μΆ”κ°€ν•˜μ—¬ λ‹€λ₯Έ ν™•μž₯자의 μ˜μƒμ΄ μž¬μƒλ˜λ„λ‘ ν•  수 있음
<video controls>
    <source src="./video/bridge.mp4" type="video/mp4">
    <source src="./video/bridge_m.webm" type="video/mp4">
</video>

πŸ’œ VIDEO : μžλ™μž¬μƒ μ„€μ •

  • autoplay 속성을 λ„£μœΌλ©΄ μžλ™μž¬μƒ μ„€μ • κ°€λŠ₯
  • chrome λΈŒλΌμš°μ €λŠ” μΆ”κ°€λ‘œ muted 속성도 λ„£μ–΄μ£Όμ–΄μ•Ό μ œλŒ€λ‘œ μžλ™μž¬μƒ λ™μž‘
<video controls autoplay muted>
    <source src="./video/bridge.mp4" type="video/mp4">
</video>

πŸ’œ VIDEO : preload μ„€μ •

  • 미리 λ‹€μš΄λ‘œλ“œ λ°›μ„μ§€μ˜ μ—¬λΆ€λŠ” preload 속성을 톡해 μ„€μ • κ°€λŠ₯
  • preload κ°€ none 이라면 미리 λ‹€μš΄μ΄ λ˜μ§€ μ•ŠμŒ
  • preload κ°€ auto 라면 미리 λ‹€μš΄μ΄ 됨
  • preload κ°€ metadata 라면 μ λ‹Ήνžˆ 미리 λ‹€μš΄μ΄ 됨
<video controls preload="none">
    <source src="./video/bridge.mp4" type="video/mp4">
</video>
<video controls preload="auto">
    <source src="./video/bridge.mp4" type="video/mp4">
</video>
<video controls preload="metadata">
    <source src="./video/bridge.mp4" type="video/mp4">
</video>

πŸ’œ VIDEO : 썸넀일 μ„€μ •

  • poster 속성을 톡해 μ„€μ • κ°€λŠ₯
<video controls poster="./img/thumbnail.png">
    <source src="./video/bridge.mp4" type="video/mp4">
</video>

πŸ’œ VIDEO : λ¬΄ν•œλ°˜λ³΅μž¬μƒ μ„€μ •

  • loop 속성을 톡해 μ„€μ • κ°€λŠ₯
<video controls loop autoplay muted>
    <source src="./video/bridge.mp4" type="video/mp4">
</video>

πŸ’œ AUDIO : κΈ°λ³Έ ν˜•νƒœ 

  • 아무것도 μ•ˆλ‚˜μ˜΄.. λ‹Ήν™©ν•˜μ§€ 말자
<audio src="./audio/bass.mp3"></audio>
  • video 와 달리 audio λŠ” controls λ₯Ό λ„£μ–΄μ€˜μ•Ό λ³΄μž„
<audio src="./audio/bass.mp3" controls></audio>

πŸ’œ AUDIO : μŒμ†Œκ±° μ„€μ •

  • muted 속성을 μΆ”κ°€ν•˜λ©΄ μŒμ†Œκ±° μƒνƒœκ°€ 기본으둜 섀정됨
<audio src="./audio/bass.mp3" controls muted></audio>

πŸ’œ AUDIO : μžλ™μž¬μƒ μ„€μ •

  • autoplay 속성이 μžˆμ§€λ§Œ audio μ—μ„œλŠ” μ μš©λ˜μ§€ μ•ŠμŒ
<audio src="./audio/bass.mp3" controls muted autoplay></audio>

πŸ’œ AUDIO : preload μ„€μ •

  • 미리 λ‹€μš΄λ‘œλ“œ λ°›μ„μ§€μ˜ μ—¬λΆ€λŠ” preload 속성을 톡해 μ„€μ • κ°€λŠ₯
  • preload κ°€ none 이라면 미리 λ‹€μš΄μ΄ λ˜μ§€ μ•ŠμŒ
  • preload κ°€ auto 라면 미리 λ‹€μš΄μ΄ 됨
  • preload κ°€ metadata 라면 μ λ‹Ήνžˆ 미리 λ‹€μš΄μ΄ 됨
<audio src="./audio/bass.mp3" controls preload="none"></audio>
<audio src="./audio/bass.mp3" controls preload="auto"></audio>
<audio src="./audio/bass.mp3" controls preload="metadata"></audio>

πŸ’œ AUDIO : 더 λ‚˜μ€ ν˜•νƒœ

  • audio 도 video 처럼 source νƒœκ·Έμ— src λ„£λŠ” 게 κ°€λŠ₯
<audio controls>
    <source src="./audio/bass.mp3" >
</audio>

 

728x90
λ°˜μ‘ν˜•