제목 없음

DEXTFramework.NET Framework 2008 version 1.1.0.0

DEXTVideo 개발 환경 지원

DEXTFramework.NET 2008 프레임워크는 DEXT솔루션 제품의 개발 환경을 좀 더 쉽게 접근하기 위해서, 관련 웹서버컨트롤 및 템플릿을 지원합니다. DEXTVideo 개발 환경을 지원하기 위해서 프레임워크에는 웹서버컨트롤과 프로젝트 템플릿을 지원합니다.

지원 웹서버컨트롤

웹서버컨트롤	설명
Video	DEXTVideo를 렌더링합니다.
VideoSectionBar	wiseSectionBar.swf 플래시를 렌더링합니다.
VideoPlayer	wisePlay9_Full.swf 플래시를 렌더링합니다.

주의) 프레임워크는 DEXTVideo 개발 환경을 지원하는 것이며, 이는 실제 프레임워크에는 DEXTVideo 제품이 포함되어 있지 않음을 알려드립니다.

1. 웹사이트 혹은 웹응용프로그램을 생성하고 도구상자에서 Video 컨트롤 및 VideoSectionBar 컨트롤을 드래그 하여 페이지를 구성합니다.
Video 컨트롤은 동영상 인코딩 작업을 수행하는 DEXTVideo ActiveX를, VideoSetionBar 컨트롤은 동영상 구간 편집에 도움을 주는 wiseSectionBar.swf 플래시를 렌더링합니다.

2. Codebase 프로파티에 dextvideo.cab 파일 웹경로를 설정하고 서버측 동영상 업로드 로직을 수행하는 페이지 경로를 UploadUrl 프로파티에 지정합니다.

DEXTVideo ASPX 소스코드

                        <!-- Video(DEXTVideo) -->
<dfx:Video ID="Video1" runat="server" Height="32px" Width="400px"
	Codebase="~/Cab/dextvideo.cab" 
	UploadUrl="http://localhost/DEXTVideoWebSite1/UploadVideo.aspx" 
	LicenseKey="xxxxxxxxxxxxxxxxxxxxxx" FrameSize="">
	<UploadCompleteScript ResultArgumentName="strResult"
		ReturnArgumentName="nRetval">
	    // 변환된 동영상 업로드 작업이 완료된 후 동작할 자바스크립트 코드를 삽입하세요.	    
	</UploadCompleteScript>
	<FinishEncodingScript ResultArgumentName="strResult" ReturnArgumentName="nRetval">
	    // 동영상 인코딩 작업이 완료된 후 동작할 자바스크립트 코드를 삽입하세요.	    
	</FinishEncodingScript>                                
	<GetThumbnailScript ExitArgumentName="bExit"
		LocationArgumentName="sLocation" SecondTimeArgumentName="nSec"> 
	    // 썸네일을 추출할 때마다 호출됩니다.	    
	</GetThumbnailScript>
	<DoReadyScript>
	    // DEXTVideo가 로드된 후 동작할 자바스크립트 코드를 삽입하세요.	    
	</DoReadyScript>
	<FinishExtractThumbnailScript GuidFilenameArgumentName="fid"
		ThumbnailNumbersArgumentName="thumbnolist">   
	    // 썸네일 리스트 추출이 완료되면 호출됩니다.
	</FinishExtractThumbnailScript>
</dfx:Video>
...
<!-- VideoSectionBar(wiseSectionBar) -->
<dfx:VideoSectionBar ID="VideoSectionBar1" runat="server"
	WiseSectionBarUrl="~/wiseSectionBar.swf"
	Width="400px" BackColor="#2C2C2C">        
	<DivisionEventScript BeginTimeArgumentName="iBegTime"
		EndTimeArgumentName="iEndTime">  
	    // 구간 설정이 변경되면 호출됩니다.	    
	</DivisionEventScript>               
</dfx:VideoSectionBar>
                        
                    

# DEXTVideo를 사용하여 동영상 인코딩 작업 및 업로드를 수행하기 위해서는 다소 복잡한 로직 처리 (DEXTFramework.NET 프레임워크에 포함된 템플릿 기준)가 필요합니다.

동영상 파일 불러오기 버튼을 클릭합니다.
동영상으로 부터 총 재생 시간을 알아냅니다.
wiseSectionBar 플래시에 총 재생 시간을 설정합니다.
동영상 첫 혹은 특정 시간(초)의 정지 이미지를 얻습니다.
사용자가 wiseSectionBar를 사용하여 인코딩할 구간을 설정합니다.
구간을 설정할 때마다 해당 구간의 정지 이미지를 얻습니다.(이벤트)
인코딩 작업을 수행하고 총 재생 구간을 적절히 나눠 썸네일을 추출합니다.
썸네일 추출이 완료(이벤트)되면 대표 정지 이미지를 선택합니다.
최종적으로 인코딩된 동영상이 업로드 됩니다.
서버측 로직에서는 해당 동영상을 저장하고, 썸네일 이미지 리스트 및 대표 이미지에 대한 정보를 저장합니다.
업로드된 동영상을 재생합니다.

3. 동영상 파일 불러오고 재생 시간을 알아 낸 다음, 초기 구간 설정을 지정한 후, 초기 이미지를 얻습니다.

동영상 불러오기 및 첫 정지 이미지 추출 소스

                        // 동영상 파일을 불러옵니다.
// vb는 DEXTVideo 객체이며, sb는 구간 선택 플래쉬 객체입니다.
function showFileDialog(vd, sb) {
    // 파일찾기
    var nSelCount = vd.ShowFileSelectBox();
    if (nSelCount > 0) {
        iEndTimeSec = iRuntimeSec = vd.GetDextVideoPlayTime();
        // 총 플레이 시간을 설정합니다.
		sb.unwFlash_SetTotalTime(iRuntimeSec);
		
		isSnE = "m";
		// 동영상 첫 화면(0초)을 추출합니다.
		vd.DextVideoMakeThumbnailEx(0); // 
		...
    }
}
                        
                        <!-- Video(DEXTVideo) -->
<!-- DextVideoMakeThumbnailEx 함수가 완료되면 GetThumbnailScript 블락을 실행합니다. -->
<dfx:Video ... >
	<GetThumbnailScript ExitArgumentName="bExit"
		LocationArgumentName="sLocation" SecondTimeArgumentName="nSec"> 
		// 썸네일을 추출할 때마다 호출됩니다.
		var thumbObj = null;                
		if (isSnE == "m") { // 첫 정지 이미지
		thumbObj = document.getElementById("thumbMain");
		} else if (isSnE == "s") { // 시작 정지 이미지
		thumbObj = document.getElementById("thumbStart");
		document.getElementById("spanSTime").innerHTML = nSec + "초";
		} else if (isSnE == "e") { // 마지막 정지 이미지
		thumbObj = document.getElementById("thumbEnd");    
		document.getElementById("spanETime").innerHTML = nSec + "초";
		}
        // 추출된 정지 이미지를 보여줍니다.
		thumbObj.src = sLocation; // img 객체입니다.
		...
	</GetThumbnailScript>
</dfx:Video>
                        
                    

4. wiseSectionBar의 동영상 재생 구간을 변경하면 이벤트가 발생하고, 해당 이벤트마다 DEXTVideo의 DextVideoMakeThumbnailEx 함수를 사용하여 정지 이미지를 추출합니다.

재생 구간 변경 이벤트 처리

                        <!-- VideoSectionBar(wiseSectionBar) -->
<!-- 마우스 드래그로 구간이 변경되면 DivisionEventScript 블락을 실행합니다. -->
<dfx:VideoSectionBar ... >        
	<DivisionEventScript BeginTimeArgumentName="iBegTime" EndTimeArgumentName="iEndTime">  
		// 구간 설정이 변경되면 호출됩니다.                  
		if (iBegTimeSec != iBegTime) isSnE = "s";
		if (iEndTimeSec != iEndTime) isSnE = "e";
		// 구간 설정
		iBegTimeSec = iBegTime;
		iEndTimeSec = iEndTime;
		// s이면 시작, e이면 마지막
		// 완료되면 Video 컨트롤의 GetThumbnailScript 블락을 다시 수행하게 됩니다.
		if (isSnE == "s") Video1.DextVideoMakeThumbnailEx(iBegTimeSec);
		else if (isSnE == "e") Video1.DextVideoMakeThumbnailEx(iEndTimeSec);
		...
	</DivisionEventScript>               
</dfx:VideoSectionBar>
                        
                    

5. 동영상 인코딩 작업을 수행하고 썸네일(여기서는 6개 추출)을 추출합니다.

동영상 불러오기 및 첫 정지 이미지 추출 소스

                        // 동영상 파일을 인코딩합니다.
// vb는 DEXTVideo 객체이며, sb는 구간 선택 플래쉬 객체입니다.
function convertFile(vd, sb) {
    // 해당 구간의 동영상을 인코딩합니다.
    vd.DextVideoSectionEncoding(iBegTimeSec, iEndTimeSec);
}
                        
                        <!-- Video(DEXTVideo) -->
<!-- DextVideoSectionEncoding 함수(인코딩)가 완료되면 FinishEncodingScript 블락이 실행됩니다. -->
<dfx:Video ... >
	<FinishEncodingScript ResultArgumentName="strResult" ReturnArgumentName="nRetval">
		// 동영상 인코딩 작업이 완료된 후 동작할 자바스크립트 코드를 삽입하세요.
		var diffTime = iEndTimeSec - iBegTimeSec;		
		// 썸네일을 최대 6개 추출합니다.    
		// 추출이 완료되면 FinishExtractThumbnailScript 블락이 실행됩니다.
		if (diffTime > 6) Video1.DextVideoMakeThumbnailAuto(6); 
		else Video1.DextVideoMakeThumbnailAuto(diffTime);
	</FinishEncodingScript>
	...
	<FinishExtractThumbnailScript GuidFilenameArgumentName="fid"
		ThumbnailNumbersArgumentName="thumbnolist">   
		// 썸네일 리스트 추출이 완료되면 호출됩니다.                                   
		thumbprefix = fid;
		arrThumb = thumbnolist;
		var noList = arrThumb.split(",");
		// 기본 대표 썸네일 설정
		presentSec = noList[noList.length - 1];
		// 썸네일 리스트중에서 하나를 고를 수 있도록 표시합니다.
		var thumbs = document.getElementById("thumbnails");
		for (var i = 0; i < noList.length; i++) {
			var imgObj = document.createElement("img");
			imgObj.src = "TempDir/" + thumbprefix + "_" + noList[i] + ".jpg";
			imgObj["selectedTime"] = noList[i];
			// 이미지를 클릭하면 해당 시간을 선택하고 썸네일 팝업이 닫히도록 합니다.
			imgObj.onclick = function () {
				presentSec = this.selectedTime;
				closeThumbnailPopup();
			};
			thumbs.appendChild(imgObj);
		}
		
		// 썸네일 리스트 화면 출력을 출력하고 선택할 수 있도록 합니다.
		...
	</FinishExtractThumbnailScript>
</dfx:Video>
                        
                    

6. 대표 썸네일을 선택하면 인코딩된 동영상 업로드 작업을 수행합니다.

업로드 로직

                        // 인코딩된 파일을 업로드 합니다.
// vb는 DEXTVideo 객체입니다.
function uploadFile(vd) {       
    // Video 컨트롤의 UploadUrl 프로파티 경로로 업로드 작업을 수행합니다. 
    vd.DextVideoFileUpload();
}
...
// 인코딩된 동영상 업로드 작업이 완료되면 나머지 콘텐츠를 등록합니다.
function submitContent() {
    // EnableEventValidation="true" 이어야 아래 코드가 동작합니다.   
    // 포스트백 방식으로 호출을 합니다.     
    <%= this.Page.ClientScript.GetPostBackEventReference(this.form1, string.Empty) %>;
}
                        
                        <!-- Video(DEXTVideo) -->
<!-- DextVideoFileUpload 함수(업로드)가 완료되면 UploadCompleteScript 블락이 실행됩니다. -->
<dfx:Video ... >
	<UploadCompleteScript ResultArgumentName="strResult" ReturnArgumentName="nRetval">
		// 변환된 동영상 업로드 작업이 완료된 후 동작할 자바스크립트 코드를 삽입하세요.		
		
		// 썸네일 정보를 저장하고 포스트백 방식으로 서버측에 게시합니다.
		document.getElementById("hfilename").value = strResult;
		document.getElementById("hpresentsec").value = presentSec;
		document.getElementById("hthumbprefix").value = thumbprefix;
		document.getElementById("hthumblist").value = arrThumb;

		// 게시합니다.
		submitContent();		
	</UploadCompleteScript>
</dfx:Video>
                        
                        // -- UploadVideo.aspx 코드 비하인드 (DEXTVideo에서 호출) --                    
protected void Page_Load(object sender, EventArgs e)
{
    string baseDir = this.Server.MapPath("~/TempDir");
    if (!Directory.Exists(baseDir)) Directory.CreateDirectory(baseDir);

    try
    {
        if (Request.Files.Count > 0)
        {
            Request.Files[0].SaveAs(
                Path.Combine(baseDir, Path.GetFileName(Request.Files[0].FileName)));
        }
        else Response.StatusCode = 500;
    }
    catch { Response.StatusCode = 500; }
}
    
// -- 동영상 편집 코드 비하인드 (포스트백 호출) -- 

// 다음 내용들은 동영상 파일명 및 썸네일 정보들입니다.
// 이 정보들을 itemseq라는 유니크 값으로 구분을 지어 데이터베이스 같은 장치에
// 저장합니다.
// Request.Form["hfilename"];
// Request.Form["hpresentsec"];
// Request.Form["hthumbprefix"];
// Request.Form["hthumblist"];

// 예제코드에서 itemseq 값은 고정으로 처리되었고 모든 동영상 및 콘텐츠 정보가
// 세션처리되었습니다.
// 실제 코드에서는 데이터베이스에 해당 동영상에 대한 정보가 담긴 고유번호등으로 처리를 합니다.
// flash_item_info.aspx의 코드비하인드에서 해당 itemseq 번호를 가지고
// 데이터베이스로부터 정보를 얻어와 동영상을 재생할 수 있도록 해야합니다.
Response.Redirect("./View.aspx?itemseq=100", false);
                        
                    

7. 업로드 된 동영상을 재생하기 위해서는 VideoPlayer 컨트롤을 페이지에 추가합니다.

8. 업로드 된 동영상을 재생하기 위해서는 WisePlayerUrl 프로파티에 wisePlay9_Full.swf 경로를 지정해주어야 합니다. 또한 wisePlay9_Full을 사용하여 동영상을 재생시키기 위해서는 플레이어 환경 설정 파일(wisePlay9_FullConfig)을 지정해주어야 합니다. 기본적으로 XML 파일을 사용하고 있으나, 해당 XML 도큐먼트를 출력하는 환경에 맞추어 ApplicationType 프로파티를 설정해야 합니다.
예를 들어 환경설정 파일이 wisePlay9_FullConfig.xml 이라면 Xml을, wisePlay9_FullConfig.aspx 이라면 Aspx로 설정해주어야 합니다.

wisePlay9_FullConfig 환경설정 파일은 반드시 재생 페이지와 동일한 경로에 위치해야 합니다.

동영상 불러오기 및 첫 정지 이미지 추출 소스

                        <!-- VideoPlayer(wisePlay9) -->
<dfx:VideoPlayer ID="VideoPlayer1" runat="server" BackColor="black"
	WisePlayerUrl="~/wisePlay9_Full.swf" ApplicationType="Aspx" ItemSequence="100" />
                        
                        // -- wisePlay9_FullConfig.aspx 코드 비하인드 --                       
protected void Page_Load(object sender, EventArgs e)
{
	// ASP.NET 개발 환경에서 wisePlay9 플래쉬가 읽어들이는
	// 설정 정보를 XML 형식으로 렌더링하는 예제 코드입니다.
	System.Text.StringBuilder sb = new System.Text.StringBuilder(1024);

	sb.Append("<?xml version=\"1.0\" encoding=\"UTF-8\" ?>");
	sb.Append("<FlashConfig>");
	// 재생할 동영상 아이템에 대한 정보를 나타내는 aspx 페이지 경로를 지정합니다.
	sb.Append("<DATAINFO_URL>/DEXTVideoWebSite1/flash_item_info.aspx</DATAINFO_URL>");
	sb.Append("<PLAYCOUNT_URL></PLAYCOUNT_URL>");
	sb.Append("<SCRAP_URL></SCRAP_URL>");
	sb.Append("<LOGO_URL>./images/DEXTFramework_BI.png</LOGO_URL>");
	sb.Append("<LOGO_POSITION>1</LOGO_POSITION>");
	sb.Append("<LOGO_ALPHA>50</LOGO_ALPHA>");
	sb.Append("<MUSIC_PICTURE_URL>./images/onlymusic.gif</MUSIC_PICTURE_URL>");
	sb.Append("<PLAYCOUNT_SEC>1</PLAYCOUNT_SEC>");
	sb.Append("<PLAYCOUNT_PERCENT>1</PLAYCOUNT_PERCENT>");
	sb.Append("<DATA_ENCRYPT>0</DATA_ENCRYPT>");
	sb.Append("<CENTER_BUTTON_HIDDEN>1</CENTER_BUTTON_HIDDEN>");
	sb.Append("<CAPTURE_BUTTON_HIDDEN>1</CAPTURE_BUTTON_HIDDEN>");
	sb.Append("<SCRAP_BUTTON_HIDDEN>1</SCRAP_BUTTON_HIDDEN>");
	// Standard 버전 이상에서만 지원하는 기능입니다.
	sb.Append("<CAPTURE_SAVE_URL></CAPTURE_SAVE_URL>");
	sb.Append("<CAPTURE_SAVE_PATH>./tempdir/</CAPTURE_SAVE_PATH>");
	sb.Append("<LICENSE_KEY>xxxxxxxxxxxxxxxxx</LICENSE_KEY>");
	sb.Append("</FlashConfig>");

	Response.Clear();
	Response.ClearHeaders();
	Response.ContentType = "text/xml";
	Response.BufferOutput = true;
	Response.Write(sb.ToString());
	Response.Flush();
	Response.End();
}
                        
                        // -- flash_item_info.aspx 코드 비하인드 --       
// 실제로 재생할 동영상에 대한 정보를 가지고 있습니다.                
protected void Page_Load(object sender, EventArgs e)
{
	string itemSeq = string.Empty;
	if (Request.QueryString["itemseq"] != null) itemSeq = Request.QueryString["itemseq"];

	StringBuilder sb = new StringBuilder(1024);
	
	// 실제 코드에서는 데이베이스와 같은 itemseq에 대한 정보를 가져와서 설정하도록 해야 합니다.
	string filename = "동영상 파일명";
	string presentNo = 1; // 썸네일 대표 정지 이미지 번호
	string thumbPrefix = "썸네일 prefix";
	string thumbListStr = "썸네일 리스트 문자열(콤마구분)";
	string[] thumbList = 썸네일 파일명 배열;

	sb.Append("<?xml version=\"1.0\" encoding=\"UTF-8\" ?>");
	sb.Append("<XML>");
	// 아이템 고유번호
	sb.AppendFormat("<ITEM_SEQ>{0}</ITEM_SEQ>", itemSeq);
	sb.Append("<ITEM_COPYRIGHT />");
	// Standard 버전 이상에서만 지원하는 기능입니다.
	// 미리 보기 구간 설정
	sb.Append("<TIME_LIMIT/>");
	sb.AppendFormat("<FILE_PATH>{0}.flv</FILE_PATH>", filename);
	sb.AppendFormat("<IMG_PATH>{0}_{1}.jpg</IMG_PATH>", thumbPrefix, presentNo);
	sb.AppendFormat("<MASTER_IMAGE_URL>./tempdir/{0}_{1}.jpg</MASTER_IMAGE_URL>", thumbPrefix, presentNo);
	sb.AppendFormat("<UCC_URL>./tempdir/{0}.flv</UCC_URL>", filename);
	sb.AppendFormat("<THUMBNAIL>{0}</THUMBNAIL>", thumbListStr);
	sb.AppendFormat("<THUMBNAIL_IMAGE_COUNT>{0}</THUMBNAIL_IMAGE_COUNT>", thumbList.Length);
	sb.Append("<THUMBNAIL_IMAGES>");
	foreach (string nextThumbNo in thumbList)
	    sb.AppendFormat("<THUMBNAIL_IMAGE><URL>./tempdir/{0}_{1}.jpg</URL>
	        <TIME>{1}</TIME></THUMBNAIL_IMAGE>",
		thumbPrefix, nextThumbNo);
	sb.Append("</THUMBNAIL_IMAGES>");
	sb.Append("<AD_INFO>");
	// Standard 버전 이상에만 지원하는 기능입니다
	sb.Append("<AD_INTRO_ID/><AD_INTRO_URL/><AD_INTRO_CLICK_URL/><AD_INTRO_PLAYCOUNT_PERCENT />");
	// Standard 버전 이상에만 지원하는 기능입니다
	sb.Append("<AD_END_ID/><AD_END_URL/><AD_END_CLICK_URL/><AD_END_PLAYCOUNT_PERCENT />");
	// Standard 버전 이상에만 지원하는 기능입니다
	sb.Append("<AD_BANNER_ID/><AD_BANNER_URL/><AD_BANNER_POSITION />
	    <AD_BANNER_CLICK_URL/><AD_BANNER_PLAYCOUNT_PERCENT />");
	// Standard 버전 이상에만 지원하는 기능입니다
	sb.Append("<AD_TEXT_ID /><AD_TEXT_STRING/><AD_TEXT_COLOR/><AD_TEXT_CLICK_URL/>");
	sb.Append("</AD_INFO>");
	sb.Append("</XML>");

	Response.Clear();
	Response.ClearHeaders();

	Response.ContentType = "text/xml";
	Response.BufferOutput = true;

	Response.Write(sb.ToString());
	Response.Flush();
	Response.End();
}
                        
                    

9. 빌드된 결과

지원 프로젝트 템플릿
위의 과정은 설치시 제공되는 템플릿을 통하여 소스코드를 자세히 살펴볼 수 있습니다.

프로젝트 템플릿

DEXTVideo 제품에 대한 자세한 설명은 DEXTVideo 매뉴얼을 참고하십시오.