- 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๋ก ์ฒ๋ฆฌ
- ์ฌ์ฉ์ ์ค์ฌ์ ํธ๋ฆฌํ ๋ฏธ๋์ด ํ๋ ์ด์ด๋ฅผ ๋ง๋ค์ ์๋ค.