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이 필요한 컨텐츠라면
기본 비디오 태그보단 플랫폼을 알아보세요
'IT_Developers > HTML' 카테고리의 다른 글
| HTML - 사이트 특정 부분만 Iframe 으로 보이게 하기 (1) | 2019.03.12 |
|---|---|
| meta - 메타 태그로 검색 엔진 접근차단하기 / robots, noindex, nofollow (1) | 2019.01.06 |
| HTML - og(open graph) 태그 란? / 카톡,sns 미리보기 지정 (2) | 2018.04.26 |
| HTML - 동적으로 추가된 input 값이 결과에서 받아지지 않을때 (17) | 2018.04.12 |
| meta - X-UA-Compatible 태그 / 익스플로러 호환성 (0) | 2018.01.30 |
댓글