목차
<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> 태그를 사용해, 동영상 불러옴.
MP4 : IE9+ /주요 최신 브라우저 모두 지원 (※ IE8 이하 지원 X)WebM : 크롬/파이어폭스/오페라 지원. (※ IE・Safari 지원 X)OGG : 크롬/파이어폭스/오페라 지원 (※ IE・Safari 지원 X)
MP4 : video/mp4 ※ audio/mp3 아님에 주의
WebM : video/WebM
Ogg : video/ogg
6.
<video> 태그 사용 시, 브라우저마다 인터페이스 다름.
동일 인터페이스 구현하려면, videojs.com 플러그인 사용.
7.
용량 큰 동영상 경우, 트래픽 초과로 홈페이지 닫힐 수 있으니 주의 !! 유튜브 ・비메오 등 동영상 서비스 이용 권장.
8. MDN <video> 예제 보기
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Video
PS.
MIME (마임 : M ultipurpose I nternet M ail E xtensions) - 아스키 데이터가 아닌 메시지를 인터넷 통해 전송 가능한 프로토콜ASCII (아스키 : A merican S tandard C ode for I nformation I nterchange) - 정보 교환용 표준 코드
<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 주소 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 DeadDirtyBlueshark
결과보기
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
GIF 대
https://thumbs.gfycat.com/DeadDirtyBlueshark
