목차
- <video> 예제 - 영상 재생
- <video> 정의
- <video> 속성
- <video> 예제 - 자동재생/반복/무음/iOS대응
- <video> 예제 - video 펌방지 (= 퍼가기 차단)
- <video> 예제 - JS로 자동재생시키기
- <video> 예제 - gfycat 동영상 (재생 / 대소문자 구분 고유ID 확인)
<video> 예제 - 영상 재생
[예제1]
<video width="320" height="240" controls>
<source src="https://homzzang.com/movie.mp4" type="video/mp4">
<source src="https://homzzang.com/movie.ogg" type="video/ogg">
댁 브라우저가 후져서, video 태그 지원 안 함. ㅡㅡ;
</video>
결과보기
[예제2]
<style>
video {
width:100%;
max-width:640px;
height:auto;
}
</style>
<video width="640" height="360" controls autoplay="autoplay" preload="metadata">
<source src="<?php echo G5_URL?>/homzzang.mp4" type="video/mp4" >
</video>
결과보기
[예제3]
<video controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
결과보기
<video> 정의
영상 콘텐츠 재생. (현재, MP4, WebM, Ogg 형식만 지원)
[참고]
- MP4 = (H264 비디오 코덱 + AAC 오디오 코덱) / MPEG 4 파일
- Ogg = (Theora 비디오 코덱 + Vorbis 오디오 코덱) / Ogg 파일
- WebM = (VP8 비디오 코덱 + Vorbis 오디오 코덱) / WebM 파일
1.
-
mp4 ogg webm 등 포맷이 다른 비디오 파일이 1개 이상일 때, <video> 태그 내에 <source> 태그를 사용해, 동영상 불러옴. (브라우저는 지원하는 첫 번째 소스를 선택해 재생.)
- <video> 태그 사이의 텍스트 문자는 <video> 태그 지원 않을 때만 노출됨.
- <video> 태그 사용 시, 브라우저마다 인터페이스 다름. (동일 인터페이스 구현하려면, videojs.com 플러그인 사용.)
- 용량 큰 동영상 경우, 트래픽 초과로 홈페이지 닫힐 수 있으니 주의 !! (유튜브/비메오 등 동영상 서비스 이용 권장.)
- 동영상 코덱 종류에 따라 특정 브라우저에서 재생 안 될 수도 있음. (H264 코덱으로 영상 인코딩 하면 잘 재생됨. 자세히 보기)
- HTML5에서 새로 도입
- 주요 브라우저 기본 CSS : none
2. cf.
3-1. 파일 형식별 브라우저 지원 현황.
- MP4 - 주요 최신 브라우저 모두 지원.
- WebM - 주요 최신 브라우저 모두 지원.
- OGG : Safari 제외한 주요 최신 브라우저 모두 지원.
3-2. 파일 형식별 MIME 타입
- MP4 : video/mp4 ※ audio/mp3 아님에 주의
- WebM : video/WebM
- Ogg : video/ogg
4.
IE9 이상 주요 브라우저 모두 지원.
5. 영문 공식 매뉴얼 보기
PS.
- MIME (마임 : Multipurpose Internet Mail Extensions) - 아스키 데이터가 아닌 메시지를 인터넷 통해 전송 가능한 프로토콜
- ASCII (아스키 : American Standard Code for Information Interchange) - 정보 교환용 표준 코드
<video> 속성
| 속성 |
속성값 |
설명 |
비고 |
| autoplay |
autoplay |
자동 재생
★ muted="muted" 속성도 필요. |
HTML5 추가 |
| controls |
controls |
재생 멈춤 등 영상 재생 제어 도구
(예) 다운로드 버튼 제거
<video controls controlsList="nodownload"> |
HTML5 추가 |
| height |
px값 |
영상 플레이어 세로 길이. 단위는 안 적음. |
HTML5 추가 |
| loop |
loop |
반복 재생 |
HTML5 추가 |
| muted |
muted |
소리 죽임
★ autoplay 속성 사용 시 필요. |
HTML5 추가 |
| poster |
URL 주소 |
영상 다운 중이거나 유저가 재생 버튼 누르기 전 띄울 이미지 |
HTML5 추가 |
| preload |
auto
metadata
none |
auto : 페이지 로딩 시, 영상 파일 전체 로딩
metadata : 페이지 로딩 시, 메타데이터만 로딩
none : 페이지 로딩 시, 영상 파일 로딩 안 함. |
HTML5 추가 |
| src |
URL 주소 |
재생할 영상 파일 URL 주소
cf.
<source> 태그 사용 시, <source> 태그의 src 속성 이용. |
HTML5 추가 |
| width |
px값 |
영상 플레이어 가로 길이. 단위는 안 적음. |
HTML5 추가 |
※ 메타데이터 (= 속성정보 metadata) :실제 데이터를 효율적으로 관리하는데 필요한 직간접 데이터.
※ <video> 태그는 전역속성・이벤트속성 지원.
※ 속성명과 속성값이 동일 시, 속성값 생략 가능.
※ iOS 경우,
playsinline 속성 추가해야 현재 화면에서 재생됨.
자세히보기
<video> 예제 - 자동재생/반복/무음/iOS대응
<video autoplay="" loop="" muted="" playsinline="">
<source src="영상주소" type="video/mp4">
이 브라우저는 video태그 지원 않습니다. 크롬 권장합니다.
</video>
결과보기
PS. 속성명과 속성값 동일 시, 속성명만 적어도 됨.
<video autoplay loop muted playsinline>
<source src="영상주소" type="video/mp4">
이 브라우저는 video태그 지원 않습니다. 크롬 권장합니다.
</video>
결과보기
<video> 예제 - video 펌방지 (= 퍼가기 차단)
<script>
$(document).ready(function(){
$('비디오선택자').bind('contextmenu',function() { return false; });
});
</script>
PS2. 100% 펌 방지 불가능. 「불펌 시 법적 불이익 경고 메세지」사용 권장.
<video> 예제 - JS로 자동재생시키기
게시판스킨/view.skin.php 하단에 추가
<?php if($bo_table && $wr_id) {?>
<script>
const video = document.querySelectorAll("video");
let i=0;
video.forEach(function() {
video[i].setAttribute("autoplay", "true");
video[i].setAttribute("autoplay", "true");
video[i].setAttribute("muted", "true");
video[i].setAttribute("loop", "true");
video[i].removeAttribute("controls", "true");
i++;
});
</script>
<?php } ?>
PS. 위 핑크색 부분 대신 아래처럼 넣어도 됨.
video[i].play();
PS1. 이 코드 적용하면, 소리 재생 X
PS2. 페이지 새로고침 시, 자동재생 X
PS3. 페이지 새로고침해도
자동재생 되게 하려면 링크글 참고.
<video> 예제 - gfycat 동영상 (재생 / 대소문자 구분 고유ID 확인)
※ 아래 「파란색 대소문자 구분된 동영상 고유ID」 부분만 교체해 사용.
<video autoplay="" loop="" preload="auto" webkit-playsinline="" playsinline="" muted="" style="width: 640px;max-width:100%;height:auto;" poster="https://thumbs.gfycat.com/DeadDirtyBlueshark-mobile.jpg"><source src="https://thumbs.gfycat.com/DeadDirtyBlueshark-mobile.mp4" type="video/mp4"></video>
결과보기
PS. gfycat 동영상 대소문자 구분된 고유ID 얻는 법
1. 맘에 드는 gfycat.com 동영상 주소 방문 (예) 카즈하 님 움짤주소
https://gfycat.com/ko/deaddirtyblueshark-lesserafim-kazuha
2. 아래 2가지 방법 중 하나 택일해 확인
PS. gif 이미지 주소 확인
https://gfycat.com/ko/deaddirtyblueshark-lesserafim-kazuha 영상 사이트 우측 퍼가기에서 종이비행기 아이콘 클릭 후, GiFS 링크 클릭해 확인.
GIF 소 (<1MB)
https://thumbs.gfycat.com/DeadDirtyBlueshark-max-1mb.gif
GIF 대
https://thumbs.gfycat.com/DeadDirtyBlueshark-size_restricted.gif
