HTML5 - Video 태그 사용하기 / 예제

---

HTML5 비디오 태그 샘플 

---

 

안녕하세요. 고코더 입니다. 

 

웹에서 비디오를 재생 시킬때 애용하던 태그가 있습니다.

embed : 멀티미디어 태그 

 

▼ 이런식으로 src에 주소 값만 넣어주면 

<embed src="https://gocoder.tistory.com/attachment/cfile8.uf@99D874365C22E0671419F4.mp4">

 

▼ 추억의 플레이어 스킨을 볼 수 있습니다 .

 

 

HTML4에서 사용이 중지되었지만 HTML5에는 다시 사용이 가능하지만 권장사항은 아닙니다.

왜냐면 HTML5에 Video 강력한 태그가 존재하기 때문입니다. 

 

▼ 아래의 코드를 웹에서 실행하면 

<video width="854" height="480" controls> <source src="https://gocoder.tistory.com/attachment/cfile8.uf@99D874365C22E0671419F4.mp4" type="video/mp4"> <source src="https://gocoder.tistory.com/attachment/cfile8.uf@99D874365C22E0671419F4.webm" type="video/webm"> <source src="https://gocoder.tistory.com/attachment/cfile8.uf@99D874365C22E0671419F4.ogg" type="video/ogg"> </video>

 

▼ 새로운 모습의 비디어 플레이어가 나타납니다.

훨씬 세련된 모습입니다. 

 

▼ 이 태그의 컨트롤바 속성을 알아보겠습니다.

controls : 플레이어 컨트롤바가 나타납니다.

autoplay : 플레이어 컨트롤바가 나타납니다.

 

▼ 상단의 비디오 태그의 controls 를 "autoplay"로 바꿉니다.

<video width="854" height="480" autoplay>

 

▼ 그럼 컨트롤바 없이 자동 재생 가능한 비디오 플레이어가 나타납니다. 

 

 

▼ source 옵션 태그 

source : 비디오 URL을 입력합니다. 순차적으로 입력합니다. 플레이 불가시 다음 소스의 영상을 플레이 합니다.

 

▼ type에 해당 영상의 포맷을 입력 합니다. 

video/mp4

video/webm

video/ogg

 

▼ 하나 이상의  소스태그를 입력해주세요.

<source src="https://gocoder.tistory.com/attachment/cfile8.uf@99D874365C22E0671419F4.mp4" type="video/mp4"> <source src="https://gocoder.tistory.com/attachment/cfile8.uf@99D874365C22E0671419F4.webm" type="video/webm"> <source src="https://gocoder.tistory.com/attachment/cfile8.uf@99D874365C22E0671419F4.ogg" type="video/ogg">

 

▼소스의 합입니다. 어렵지 않으니

눈으로만 봐도 될거 같습니다. 

 

<!--이젠 그만 더 좋은 video 태그를-->   <video width="854" height="480" controls> <!--autoplay를 사용하면 컨트롤바 없이 자동 재생 --> <source src="https://gocoder.tistory.com/attachment/cfile8.uf@99D874365C22E0671419F4.mp4" type="video/mp4"> <source src="https://gocoder.tistory.com/attachment/cfile8.uf@99D874365C22E0671419F4.webm" type="video/webm"> <source src="https://gocoder.tistory.com/attachment/cfile8.uf@99D874365C22E0671419F4.ogg" type="video/ogg"> <!--동영상의 소스 주소대로 순차작 입력 --> </video>

 

---

마무리

---

 

DRM이 필요한 컨텐츠라면

기본 비디오 태그보단 플랫폼을 알아보세요