웹모아
웹모아[손님] 검색   로그인    


 
윈도우미디어
 


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



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 재생3392
   Silverlight Object 태그 알아 보기!(1) 3
     ebs 의 silverlight_player.js1
   Widnows Media Player 삽입하기2424
   버버링시 이미지 보여주기(1) 2639
   음악/동영상 태그 (embed, object)3150
   object 태그 예제2622
   윈도미디어플레이어의 PARAM속성3180
   rmvb 파일은 무엇으로 재생하나요?2931
   미디어에 테두리 두르기2720
   확장자가 pls는 아마..음악방송이나 그런거 들으시3204
   RealAudio2873
   RealAudio(1) 2637
   Windows Media Player 11 SDK 3090
   플래시 재생 소스3131
   롯데자이언츠 경기 실시간 중계(KNN라디오)(1) 2933
   인터넷으로 TV - 자바 스크립트(홈마스타)2621
   KBS 1 TV 소스(나는2)2750
   BBS 라디오소스 - 리얼플레이어(홈마스타)2626
   bbs 라디오 소스 - 미디어 플레이어(홈마스타)3408
   리얼플레이어 설치 안내 및 라디오 테스트(홈마스타)2588
   리얼 플레이어 음악 올리기(홈마스타)3022
     [RE] 리얼 플레이어 음악 올리기(홈마스타)2679
   미디어플레이어 태그 삽입방법 여러가지(홈마스타)3084
   사랑비 랜덤 음악 플레이어 소스(홈마스타)2886
    embed에서 재생이 안되면 다음 곡을 재생하는 방(홈마스타)2797
   미디어 플레이어 제어하기(홈마스타)4040
   네이버 동영상 재생이 안될때 해결방법(홈마스타)3388
   player.playState - sdk 7.1(홈마스타)2799
   미디어플레이어 테스트(홈마스타)2683
≪ [1]  [2]  [3]   ≫

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



 
최근 글
[손님]
97
87
240
423
659
392
433
246
366
3819
921
960
1224
979
4282
 
인기 글
[손님]
4045
3926
10659
3121
5193
3408
3064
[홈마스타] [RE] input type=\\
6751
3546
[홈마스타] php 한글체크문제
3273
4855
[홈마스타] check박스 배열 넘기기
5610
3402
5141
3217