HTML5 비디오 태그 샘플 


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

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

▼ 이런식으로 src에 주소 값만 넣어주면 
1
<embed src="https://gocoder.tistory.com/attachment/cfile8.uf@99D874365C22E0671419F4.mp4">
cs

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



HTML4에서 사용이 중지되었지만 HTML5에는 다시 사용이 가능하지만 권장사항은 아닙니다.
왜냐면 HTML5에 Video 강력한 태그가 존재하기 때문입니다. 

▼ 아래의 코드를 웹에서 실행하면 
1
2
3
4
5
<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>
cs

▼ 새로운 모습의 비디어 플레이어가 나타납니다.
훨씬 세련된 모습입니다. 


▼ 이 태그의 컨트롤바 속성을 알아보겠습니다.
controls : 플레이어 컨트롤바가 나타납니다.
autoplay : 플레이어 컨트롤바가 나타납니다.

▼ 상단의 비디오 태그의 controls 를 "autoplay"로 바꿉니다.
1
<video width="854" height="480" autoplay>
cs

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



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

▼ type에 해당 영상의 포맷을 입력 합니다. 
video/mp4
video/webm
video/ogg

▼ 하나 이상의  소스태그를 입력해주세요.
1
2
3
<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">
cs

▼소스의 합입니다. 어렵지 않으니
눈으로만 봐도 될거 같습니다. 

1
2
3
4
5
6
7
8
9
<!--이젠 그만 더 좋은 video 태그를-->
<!--<embed src="https://gocoder.tistory.com/attachment/cfile8.uf@99D874365C22E0671419F4.mp4">-->
 
<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>
cs


마무리


DRM이 필요한 컨텐츠라면
기본 비디오 태그보단 플랫폼을 알아보세요 


댓글을 달아 주세요