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
λ°μν
'[κ°λ°] Practice > HTML CSS' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[HTML/CSS] Grid λ°μν λ μ΄μμ λ§λ€κΈ° (0) | 2022.03.02 |
---|---|
[HTML/CSS] transform & animation μΌλ‘ 맀λλ¬μ΄ μ λλ©μ΄μ λ§λ€κΈ° (0) | 2022.03.01 |
[HTML/CSS] SCSS λ‘ row, col λ§λ€κΈ° (0) | 2022.03.01 |
[HTML/CSS] SCSS λ‘ Alert λ°μ€ λ§λ€κΈ° (0) | 2022.03.01 |
[HTML/CSS] SCSS λ‘ λ¦¬μ€νΈ λ§λ€κΈ° (0) | 2022.03.01 |