HTML5 video and image play

adplay.js

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();