반응형
Notice
Recent Posts
Recent Comments
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
Tags
- Hibernate
- ChannelPipeline
- Airflow
- Spring Open Feign
- docker
- MySQL
- docker-compose
- spring boot redis
- jmeter
- JPA
- KAFKA
- Netty
- Redis Sentinel
- redis
- netflix oss
- Docker Compose
- mybatis
- spring boot
- coalesce
- weblogic 10
- vue.js
- cassandra
- argo cd
- QueryDSL
- docker compose mysql
- spring cloud
- grafana
- WebLogic
- Selenium
- RabbitMQ
Archives
- Today
- Total
IT.FARMER
HTML5 Video and image 재생 (AD Player) 본문
반응형
HTML4 video tag 를 이용한 AD player 재생기
HTML5로 광고를 재생할수 있는 기능을 구현해보자 광고재생이라하면 기본적으로 비디오, 이미지 두가지의 기능이 있어야 할 것이다. HTML5에 VIDEO Tag가 있으니 이를 활용하여 만든다. Video Tag는 다음음과 같은 속성을 가지고 있다.
| 프로퍼티 | 형식 | 설명 |
|---|---|---|
| buffered | TimeRanges[ref name=”time-ranges”]시간 범위를 나타내는 객체로 length, start, end 를 속성으로 가집니다. | 현재 재생중인 미디어의 URL |
| currentSrc | 문자열 | 현재 재생중인 미디어의 URL |
| currentTime | 숫자 | 재생 중인 미디어의 현재 위치 |
| defaultPlaybackRate | 숫자 | 기본 미디어 재생 속도 배속. 기본값은 1.0으로 원래의 속도대로 재생합니다. |
| duration | 숫자 | 미디어의 재생 길이. 미디어 데이터가 없다면 NaN을 반환합니다. |
| ended | boolean | 재생이 종료됐는지의 여부 |
| initialTime | 숫자 | 초기 재생 위치. 초 단위 숫자로 표현 |
| loop | Boolean | 미디어의 반복 재생 여부 |
| muted | Boolean | 음소거 여부 |
| networkState | 숫자 | 네트워크 상태를 나타내는 0부터 3까지의 정수. |
| paused | Boolean | 미디어 재생 일시 정지 여부 |
| poster | 문자열 | <video>요소의 poster 속성 |
| playbackRate | 숫자 | 미디어 재생 속도 배속. 기본값은 1.0으로 원래의 속도대로 재생합니다. 이 속성을 조절하면 빨리 감기나 슬로우 모션 기능을 구현할 수 있습니다. |
| played | TimeRanges[backref name=”time-ranges”] | 현재 재생중인 미디어의 URL |
| preload | 문자열 | 요소의 preload 속성 |
| readyState | 숫자 | <video> 요소의 준비 상태. 0~3까지의 숫자값을 가집니다. |
| seekable | TimeRanges[backref name=”time-ranges”] | 탐색 가능한 범위 |
| seeking | Boolean | 미디어의 특정 위치로 탐색 중일 때. 탐색 전이거나 탐색을 완료한 후에는 항상 false입니다. |
| src | 문자열 | <video> 요소의 src 속성 |
| startOffsetTime | Date | 시작 위치를 Date 객체로 반환 |
| tracks | TextTrack[] | text track 배열 |
| videoHeight | 숫자 | 동영상 원본의 높이 |
| videoWidth | 숫자 | 동영상 원본의 너비 |
| volume | 숫자 | 0.0(음소거)부터 1.0(최대)까지의 실수로 표현하는 볼륨 크기 |
| width | 숫자 | <video> 요소의 width 속성 |
모든 속성을 사용하느것이 아니라. 재생에 필요한 몇가지만 사용할것이다.
여기서는 비디오 재생이 끝나는 시점에 이벤트를 일으켜야 하기때문에 onended="" event를 이용해서 재생이 끝나는 시점에 배열 혹은 List 객체안에 속해있는 객체들을 반복문으로 동작될수 있겠끔 해준다.
HTML 예제
<body style="overflow: hidden;top: 0; left: 0; background: black;">
<div id="adOutline" style="display:table-cell;text-align:center;vertical-align:middle;" >
<video id="Video1" onended="AdPlayer.videoEndedCatch()" style="display: none" poster="" >
<source src="" type="video/mp4" />
</video>
<img id="imageTag" alt="" src="" style="display: none;vertical-align: middle;" />
<div id="buttonbar" style="display: none;">
<button id="restart" onclick="AdPlayer.restart();">[]</button>
<button id="rew" onclick="AdPlayer.skip(-30)"><<</button>
<button id="play" onclick="AdPlayer.vidplay()">></button>
<button id="fastFwd" onclick="AdPlayer.skip(-30)">>></button>
</div>
</div>
</body>**
_Script 예제_**
document.onkeydown = function(evt) {
evt = evt || window.event;
console.log(evt.keyCode);
switch (evt.keyCode) {
case 27: //ESC
AdPlayer.vidplay();
// 광고를 종료 하시겠습니까?
if (confirm('광고를 종료 하시겠습니까?')) {
location.href = '<%=CONTEXT_PATH%>/이동 경로..';
} else {
AdPlayer.vidplay();
}
break;
case 37: // <-
AdPlayer.skip(-30);
break;
case 39: // ->
AdPlayer.skip(60);
break;
default:
break;
}
};
// 광고재생 플레이어
var AdPlayer = (function() {
function fileTypeCheck (fileType) {
if(fileType.startsWith('image')){
return "IMAGE";
} else if(fileType.startsWith('video')) {
return "VIDEO";
}
}
var adList = {
items : [
<%
for(AdInfo adInfo : adInfos) {
%>
{
src : '/upload/<%= adInfo.getFileInfo().getFileName()%>',
tag : "",
type : fileTypeCheck('<%= adInfo.getFileInfo().getFileType()%>'),
delayTime :'<%= adInfo.getDelayTime()%>' ,
document : ""
},
<%
}
%>
]
}
var adSize = adList.items.length;
if(adSize < 1) {
alert('등록된 광고가 없습니다.');
location.href = '<%=CONTEXT_PATH%>/이동경로...';
}
//기준이 될수있는 카운트 생성.
var adPlayCount = 1;
var video = document.getElementById("Video1");
var image = document.getElementById("imageTag");
var button = document.getElementById("play");
return {
// 윈도우 사이즈 체크
windowSizeCheck : function() {
window.innerWidth; // 브라우저 윈도우 두께를 제외한 실질적 가로 길이
window.outerWidth; // 브라우저 윈도우 두께를 포함한 브라우저 전체 가로 길이
//세로길이
window.innerHeight; // 브라우저 윈도우 두께를 제외한 실질적 세로 길이
window.outerHeight; // 브라우저 윈도우 두께를 포함한 브라우저 전체 세로 길이
},
// 비디오 사이즈 변경
objSizeChange : function() {
video.width = window.innerWidth; // 브라우저 윈도우 두께를 포함한 브라우저 전체 가로 길이
video.height = window.innerHeight; // 브라우저 윈도우 두께를 포함한 브라우저 전체 세로 길이
},
// 재생시 ITEM에서 가져올 번지를 체크하기 위함.
itemCountPlus : function() {
// 숫자가 같아지면, 사이즈를 초기화 한다.(반복재생을 위함)
if (adPlayCount == adSize) {
adPlayCount = 1;
} else {
adPlayCount++;
}
},
//vidplay 재생 - 비디오 플레이어가 종료되는 타임을 잡아 바로 다음것을 재생한다.;
videoEndedCatch : function() {
/*var item = adList.items[adPlayCount - 1];
if (item.type === 'VIDEO') {
var video = document.getElementById("Video1");
video.src = item.src;
AdPlayer.objSizeChange();
video.play();
} else {
// IMAGE 처리
image.style.display='inline';
image.src = item.src;
}*/
video.style.display='none';
AdPlayer.nextAd();
// count plus
// AdPlayer.itemCountPlus();
},
//재생
vidplay : function() {
if (video.paused) {
video.play();
button.textContent = '||';
} else {
video.pause();
button.textContent = '>';
}
},
// 재시작
restart : function() {
video.currentTime = 0;
},
// 스킵
skip : function(value) {
video.currentTime += value;
},
// 사이즈 재조정
reSize :function (width, height) {
},
// 다음광고
nextAd : function() {
var item = adList.items[adPlayCount - 1];
if (item.type == 'VIDEO') {
video.style.display = 'inline';
fadeInOut(video,'in');
// 재생 비디오 삽입
video.src = item.src;
// 사이즈 조절
AdPlayer.objSizeChange();
// 비디오 재생
video.play();
} else if (item.type == 'IMAGE') {
image.style.display='inline';
fadeInOut(image,'in');
image.src="";
image.src = item.src;
setTimeout(function() {
image.style.display='none';
AdPlayer.nextAd();
}, item.delayTime);
}
AdPlayer.itemCountPlus();
},
//시작광고
init : function() {
console.log('AD PLAYER START!!!');
var adOutline = document.getElementById('adOutline');
adOutline.style.width = window.outerWidth+"px";
adOutline.style.height = window.outerHeight+"px";
var item = adList.items[adPlayCount - 1];
if (item.type == 'VIDEO') {
video.style.display = 'inline';
fadeInOut(video,'in');
// 재생 비디오 삽입
video.src = item.src;
// 사이즈 조절
AdPlayer.objSizeChange();
// 비디오 재생
video.play();
} else if (item.type == 'IMAGE') {
// IMAGE 처리
image.style.display='inline';
fadeInOut(image,'in');
image.src = item.src;
setTimeout(function() {
image.style.display = 'none';
AdPlayer.nextAd();
}, item.delayTime);
}
// 숫자가 같아지면, 사이즈 변경
AdPlayer.itemCountPlus();
}
}
})();
// FADE IN - OUT
function fadeInOut(id,io) {
var level = null;
var timer = null;
if( io == "in" ) level = 0;
else if( io == "out" ) level = 1;
else return;
timer = setInterval( function(){ level = fadeInOutAction(id, io, level, timer); }, 150 );
}
// FADE IN - OUT Action..
function fadeInOutAction(id, io, level, timer) {
if( io == "in" ) level = level + 0.1;
else if( io == "out" ) level = level - 0.1;
else return;
changeOpacity(id, level);
if( io == "in" && level > 1 ) {
clearInterval(timer);
} else if( io == "out" && level < 0 ) {
clearInterval(timer);
}
return level;
}
// FADE IN - OUT 투명도 조절
function changeOpacity(id,level) {
var obj = id;
obj.style.opacity = level;
obj.style.MozOpacity = level;
obj.style.KhtmlOpacity = level;
//obj.style.MsFilter = "'progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (level * 100) + ")'";
obj.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
//시작
AdPlayer.init();반응형
'JavaScript > script' 카테고리의 다른 글
| IE 브라우저 버전 체크 script (0) | 2016.07.08 |
|---|---|
| javascript 이미지 미리보기 (0) | 2016.03.30 |
| JavaScript Boolean Object (0) | 2012.07.19 |
| javascript 스크롤바 위치 기억 (2) | 2011.11.14 |
| javascript Date getTimezoneOffset() (0) | 2011.11.10 |