1. 비디오 태그 <video>
HTML5 이전의 멀티미디어는 음악파일, 비디오파일, 플래시파일 어떤것이든 <embed> 태그를 이용했습니다.
앞서 배운 오디오 태그 또한 마찬가지죠.
어떤 방식으로든 이용할 수 있는 장점이 있지만,
플러그인이 없는 것의 경우엔 플러그인을 따로 설치를 해야만 했습니다.
아마도 인터넷 익스플로어 사용자분들은 잘 모르실 수 있겠지만,
오디오 및 비디오를 이용하기 위해 기본적으로 Windows Media Player가 깔려있고,
네이버만 들어가도 설치하라고 나오는 Flash Player가 바로 플러그인입니다.
오디오 태그와 같이 이 비디오 태그 또한 embed 태그에서 벗어나 비디오쪽으로 전문화 되어 나온 태그입니다.
때문에, 플러그인 없이도 웹 브라우저만으로도 동영상을 플레이 시킬 수 있습니다.
△ embed 태그를 이용한 영상
위의 동영상들처럼 컨트롤바 외에는 거의 차이점이 없어보이지만,
저의 경우엔 크롬을 주 브라우저로 쓰는데 embed 태그의 경우엔 크롬에서 실행이 되질 않습니다.
인터넷 익스플로어에선 윈도우 미디어 플레이어 추가기능을 실행할껀지 물어본 후에 실행이 되구요.
그에 반해 video태그는 아무 이상 없이 돌아가네요.
물론 video태그가 장점이 많은만큼 단점도 있습니다.
오디오 태그처럼 브라우저마다 지원하는 파일 형식이 다르다는 점 ㅠㅠ
한번 표를 봅시다!
| 익스플로러 | 크롬 | 파이어폭스 | 사파리 | 오페라 |
MP4(H.264+ACC) | O | O | X | O | X |
WebM(VP8+Vorbis) | X | O | O | X | O |
OGV(Theora+Vorbis) | X | O | O | X | O |
그 와중에 또 크롬은 모든 형식 지원 짱짱(모두모두 크롬쓰세요!)
MP4형식은 대부분 아실꺼구요,
WebM은 웹 전용으로 인코딩 된 파일입니다.
OGV는 생소하실텐데요, 전에 리눅스에서 동영상 만드는 포스트를 했는데 확장자가 OGV더라구요.
저도 OGV는 생소합니다.
이렇게 브라우저마다 실행되는 형식이 제각각인지라 오디오 태그에서처럼 MP4와 WebM or OGV를 함께 쓰셔야 합니다.
2. 비디오 태그 사용하기
위에서 처럼 영상을 보일때의 태그는 아래와 같습니다.
<video controls="" preload="" style="width:640px;height:480px;">
<source src="http://kurien.tistory.com/attachment/cfile9.uf@247E01345260F4D431BA0E.mp4">
</video>
<source src="">의 ""부분에는 자신이 올린 동영상의 주소를 적어주셔야해요.
저의 경우엔 10MB이하인 영상을 티스토리에 파일로 올려서 그 주소로 사용했는데요.
사용하는법은 여러가지가 있습니다.
만약 전에 올렸던 APM을 이용한 웹서버를 사용한다면 용량 걱정없이 올리실 수 있을껍니다.
이제 속성을 알아보겠습니다.
src | 비디오 파일 경로 지정 |
poster | 비디오 준비중일때의 이미지 경로 |
preload | 비디오를 재생 하기 전에 모두 불러올지 지정 |
autoplay | 비디오를 자동 재생 할지 지정 |
loop | 반복 재생 지정 |
controls | 비디오 재생 도구 출력 지정 |
width | 너비 지정 |
height | 높이 지정 |
으어 너무 많네요.
하지만 src, preload, autoplay, loop, controls는 전장의 오디오 태그에서도 나왔으니 과감히 패스!
너비와 높이를 모르실리 없으니 패스!
poster만 알아보고 넘어가겠습니다.
이미지 쓸만한게 없어서 그냥 배너를 넣어버렸습니다! ㅋㅋ
여튼 이런식으로 넣어주시면 되구요.
저의 경우에는 인코딩 하기 귀찮아서 mp4 파일만 넣었지만,
혹시 다른 파일을 같이 넣으시는 분이 계실것 같아서 적어드립니다.
<video>
<source src="http://kurien.tistory.com/attachment/cfile9.uf@247E01345260F4D431BA0E.mp4">
<source src="http://kurien.tistory.com/attachment/cfile9.uf@247E01345260F4D431BA0E.ogv">
</video>
위와 같은 형식으로 넣어주시면 됩니다.
물론 ogv파일이 있는건 아니지만 있다고 가정하고 저렇게 적었습니다.
다음번엔 Track태그로 뵙겠습니다!
질문사항은 댓글로 남겨주세요!
출처 : http://blog.kurien.co.kr/75
