- html5
- html5/VA
- html5/canvas
- html5/drag-and-drop
- html5/form
- html5/geolocation
- html5/offline-web-application
- html5/others-api
- html5/outline
- html5/overview
- html5/richtext-edit
- html5/video&audio
- html5/web-storage
- html5/web-workers
- html5/webSqlDatabase
- html5/websocket
- html5/λ¬Έμ μ
- html5practice/roundRect
- html5practice/μ¦κ²¨μ°ΎκΈ°λͺ©λ‘λ§λ€κΈ°
1. Video & Audio ¶
- μΈλΆ νλ¬κ·ΈμΈ νμμμ΄ λμμ, μ€λμ€ μ¬μκ°λ₯
- HTML5λ₯Ό μ§μνλ λΈλΌμ°μ μμ μ¬μ©ν μ μλ€.
2. μ¬μ© λ°©λ² ¶
<video src = "http://example.com/video1.mov"></video> <audio src = "http://example.com/audio1.wav"></audio>
- HTMLμμ νκ·Έλ₯Ό μ½μ
λ§ νλ©΄ λλ€.
- loop, controls, autoplay λ±μ ν΅ν΄ μ¬μ μμ±μ μ€μ ν μ μλ€.
3. Video κ³ μ νΉμ± ¶
- width μ height λ‘ μ¬μ μμμ μ§μ ν μ μλ€.
- poster λ‘ λμμμ μ¬μν μ μμλκΉμ§ νμν μ΄λ―Έμ§ URLμ μ§μ ν μ μλ€.
4. source μμ ¶
- source μμμ μμ±λ€μ μ§μ νμ¬ λ―Έλμ΄ λ°μ΄ν°μ μΆλ ₯μ μννκ² νλ€.
- type μμ± μ§μ μ ν΅ν΄ μ¬μν μ μλ λ―Έλμ΄ λ°μ΄ν°μΈμ§λ₯Ό λ€μ΄λ‘λνμ§ μκ³ λ νλ¨νλ€.
5. JavaScriptλ‘ video/audio μμ μ μ΄ ¶
- λ¨μ μ¬μλΏλ§μλλΌ JavaScriptλ₯Ό μ΄μ©νμ¬ μ λ° μ μ΄
- μ¬μ, μΌμ μ μ§, μ¬μ μλ λ³κ²½, μ¬μ μμΉ λ³κ²½ λ±
- μ¬μ, μΌμ μ μ§, μ¬μ μλ λ³κ²½, μ¬μ μμΉ λ³κ²½ λ±
- JavaScript API
- src - src μμ±κ° λμ
- currentSrc - μ€μ λ‘ μ½μ΄λ€μ¬ μ¬μ μ€μΈ λ―Έλμ΄ λ°μ΄ν°μ URL
- currentTime - νμ¬ μ¬μ μμΉ
- startTime - μ¬μν μμΉ
- duration - λ―Έλμ΄ λ°μ΄ν°μ κΈΈμ΄
- playbackRate - μ¬μ μλ(κΈ°λ³Έκ° 1.0)
- volume - μλ νμ (0.0~1.0)
- load() - λμμμ λ€μ μ½μ
- play() - λμμ μ¬μ
- pause() - λμμ μΌμμ μ§
- src - src μμ±κ° λμ
6. μ΄λ²€νΈ μ²λ¦¬ ¶
- λ―Έλμ΄ λ°μ΄ν°λ₯Ό μ½κ±°λ μ¬μν λ λ°μνλ μ΄λ²€νΈλ₯Ό JavaScriptλ‘ μ²λ¦¬
- μ¬μ©μ μ€μ¬μ νΈλ¦¬ν λ―Έλμ΄ νλ μ΄μ΄λ₯Ό λ§λ€μ μλ€.
