웹모아
웹모아[손님] 검색   로그인 / 회원가입    

 
윈도우미디어
 


HTML5 Video and image 재생
  2016-08-06 23:13:12 댓글:(0)   조회:3407




HTML5로 광고를 재생할수 있는 기능을 구현해보자

광고재생이라하면 기본적으로 비디오, 이미지 두가지의 기능이 있어야 할 것이다.


HTML5에 VIDEO Tag가 있으니 이를 활용하여 만든다.

Video Tag는 다음음과 같은 속성을 가지고 있다.



프로퍼티형식설명
bufferedTimeRanges[ref name=”time-ranges”]시간 범위를 나타내는 객체로 length, start, end 를 속성으로 가집니다.[/ref]현재 재생중인 미디어의 URL
currentSrc문자열현재 재생중인 미디어의 URL
currentTime숫자재생 중인 미디어의 현재 위치
defaultPlaybackRate숫자기본 미디어 재생 속도 배속. 기본값은 1.0으로 원래의 속도대로 재생합니다.
duration숫자미디어의 재생 길이. 미디어 데이터가 없다면 NaN을 반환합니다.
endedBoolean재생이 종료됐는지의 여부
initialTime숫자초기 재생 위치. 초 단위 숫자로 표현
loopBoolean미디어의 반복 재생 여부
mutedBoolean음소거 여부
networkState숫자네트워크 상태를 나타내는 0부터 3까지의 정수.
pausedBoolean미디어 재생 일시 정지 여부
poster문자열<video> 요소의 poster 속성
playbackRate숫자미디어 재생 속도 배속. 기본값은 1.0으로 원래의 속도대로 재생합니다. 이 속성을 조절하면 빨리 감기나 슬로우 모션 기능을 구현할 수 있습니다.
playedTimeRanges[backref name=”time-ranges”]현재 재생중인 미디어의 URL
preload문자열<video> 요소의 preload 속성
readyState숫자<video> 요소의 준비 상태. 0~3까지의 숫자값을 가집니다.
seekableTimeRanges[backref name=”time-ranges”]탐색 가능한 범위
seekingBoolean미디어의 특정 위치로 탐색 중일 때. 탐색 전이거나 탐색을 완료한 후에는 항상 false입니다.
src문자열<video> 요소의 src 속성
startOffsetTimeDate시작 위치를 Date 객체로 반환
tracksTextTrack[]text track 배열
videoHeight숫자동영상 원본의 높이
videoWidth숫자동영상 원본의 너비
volume숫자0.0(음소거)부터 1.0(최대)까지의 실수로 표현하는 볼륨 크기
width숫자<video> 요소의 width 속성


모든 속성을 사용하느것이 아니라. 재생에 필요한 몇가지만 사용할것이다.

여기서는 비디오 재생이 끝나는 시점에 이벤트를 일으켜야 하기때문에 onended=""  event를 이용해서 재생이 끝나는 시점에 

배열 혹은 List 객체안에 속해있는 객체들을 반복문으로 동작될수 있겠끔 해준다.


<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)">&lt;&lt;</button>

<button id="play" onclick="AdPlayer.vidplay()">&gt;</button>

<button id="fastFwd" onclick="AdPlayer.skip(-30)">&gt;&gt;</button>

</div>

</div>

</body>



JS Code


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



 댓글 (0)


윈도우미디어
페이지: 1 / 3   


HTML5 Video and image 재생3408
   Silverlight Object 태그 알아 보기!(1) 5
     ebs 의 silverlight_player.js3
   Widnows Media Player 삽입하기2426
   버버링시 이미지 보여주기(1) 2641
   음악/동영상 태그 (embed, object)3175
   object 태그 예제2625
   윈도미디어플레이어의 PARAM속성3188
   rmvb 파일은 무엇으로 재생하나요?2934
   미디어에 테두리 두르기2722
   확장자가 pls는 아마..음악방송이나 그런거 들으시3224
   RealAudio2875
   RealAudio(1) 2652
   Windows Media Player 11 SDK 3100
   플래시 재생 소스3146
   롯데자이언츠 경기 실시간 중계(KNN라디오)(1) 2938
   인터넷으로 TV - 자바 스크립트(홈마스타)2630
   KBS 1 TV 소스(나는2)2752
   BBS 라디오소스 - 리얼플레이어(홈마스타)2630
   bbs 라디오 소스 - 미디어 플레이어(홈마스타)3467
   리얼플레이어 설치 안내 및 라디오 테스트(홈마스타)2593
   리얼 플레이어 음악 올리기(홈마스타)3028
     [RE] 리얼 플레이어 음악 올리기(홈마스타)2683
   미디어플레이어 태그 삽입방법 여러가지(홈마스타)3102
   사랑비 랜덤 음악 플레이어 소스(홈마스타)2891
    embed에서 재생이 안되면 다음 곡을 재생하는 방(홈마스타)2803
   미디어 플레이어 제어하기(홈마스타)4082
   네이버 동영상 재생이 안될때 해결방법(홈마스타)3435
   player.playState - sdk 7.1(홈마스타)2803
   미디어플레이어 테스트(홈마스타)2690
[1]  [2]  [3]  

복수단어 검색은 공백(space)로 구분해 주세요.



 
최근 글
[손님]
 
인기 글
[손님]