포럼

유튜브 에디터 컴포넌트..? 제작을 위한 사전 작업 중입니다.

2014.05.17 02:41

애니즌

오랜 숙원인 유튜브 정복을 위해서...-_-

에디터 컴포넌트가 어떻게 만들어야 하는 지는 일단은 모릅니다만....ㅋㅋ

우선 일반 페이지로... 유튜브 api를 이용해서... 만들어 봤습니다.

관련 소스는 인터넷에서 쉽게 구할 수 있더군요: ) (인터넷 검색에 고마움과 해당 자료를 배포해주신 분께 감사의 말씀을! - 저 같은 일반인에게는 아주 큰 도움이!!)

유튜브 API를 이용해서 업로드하는 방식은 크게 두가지 방식이 있습니다.

자신의 서버에 업로드를 한 후 유튜브로 재 전송해주는 방법과

사용자 브라우저를 기반으로 유튜브 서버로 다이렉트로 올리는 방법!

첫번째 방법은 안그래도 동영상 용량이 큰데... 본인에 서버에 올리다니요.. 어익후.. 말도 안됩니다..

당연히 두번째 방법이 우리 모두가 환영하는 방법이겠지요 :)

그리고 또... 업로드를 할 계정도 두가지 방식이 있습니다.

1. 사용자 계정에 업로드 (말그대로 사용자가 유튜브에 로그인해서 올리는 겁니다.) ID값은 리턴 받을 수 있음..

2. 업로드할 계정(관리자 계정)을 사전에 설정해서 별도의 로그인 과정 없이 자신이 설정한 계정에 업로드하는 방법

1번의 경우 말그대로 개인이 올리는 것이기 때문에 ~ 관리가 불가능하다는 점과 사용자가 마음대로 삭제할 수 있죠.. (사용자 계정에 올라간 거니까..)

2번의 경우 사용자가 올리면 삭제할 수 없고.. 관리자가 삭제나.. 이런 것들을 관리할 수 있죠.

근데 저작권 문제라던가 이건 관리자가 책임져야 합니다. 그리고 별도의 사용자에게 해당 내용을 인지시켜줘야 한다고 하더군요 (그래야 추후 문제가 안생긴다고...)

암튼 서론은 이쯤하고..

약간의 시행착오가 있었지만...

업로드는 문제 없이 되는 것을 확인!

동영상 ID 값도 잘 리턴해주더군요!

근데.. 문제가 있네요..

그..그것은 바로..

동영상이 얼마나 올라갔는지 진행상황을 전혀!!! 알 수 없다는 겁니다...

일반 사용자들이 이게 제대로 올라가는지.. 아닌지... 모르니 답답하죠..

특히 요즘 같은 스마트 시대에서는 말도 안되는 일입니다..

그래서 방법이 없는 걸까....

인터넷을 또 찾아보기 시작합니다.

ajax를 이용해서 프로그레스 바를 구현해주는 소스가 있군요!

무한 정보 공유에 감사의 말씀을 다시 한 번!

그래서 현재... 결과 물입니다.

파일 선택해서! 업로드! 업로드 진행 표시!

그리고 실제 업로드가 완료된 모습까지!

실제 업로드 진행표시가 종료됐을 때 올라가는 지 확인하기 위해

유튜브에서 새로고침하면서 테스트 해본 결과 99.9%이상 일치!!

(0.1%는 사람인지라 제가 체크를 못한 부분이 있을 가능성이 있기 때문)

우와 ... 대박이네.. 근데 뭐가 문제지..?

라는 생각을 하실 수 있는데...

문제가 있습니다..ㅠㅠ 네 문제가 있네요...

기존 유튜브 전송하는 소스는

업로드 선택 페이지(my html) -> 데이터 받는 페이지(youtube) -> 전송 완료후 리턴할 페이지(my html)

이렇게 3단계로 이동이 됩니다.

근데 현재 ajax를 이용하여 구현한 프로그레스..(이하 상태바)의 경우

ajax를 이용하여 POST로 데이터 받는 페이지(youtube)로 넘겨주게 되는데...

문제는 실제 전송하는 페이지에서 youtubeID라던지.. 이런 값을 리턴을 못시켜주는 게 문제입니다....

업로드까지는 잘되나..!! 리턴 값을 받을 수 없다는 게 함정....

일단 제가 ajax를 잘 모르기 때문에..

그리고 해당 api 자체가 (잘은 모르지만) returenPage ~ 방식으로 값을 다시 넘겨주는 것 같은데

이 값을 ajax로 다시 받는 게 가능한지 자체도 의문이고...-_-;;(혹시 아시는 분 계시면 큰 도움이 될 것 같습니다 !!)

실제 프로그레스바 구현 전에는

리턴 페이지에서

$ucc_url = $_REQUEST['id'];
$ucc_status = $_REQUEST['status'];

이런식으로 결과값을 받도록 되어 있더군요

아무튼.. 이건 좀 더 머리를 굴려봐야 겠네요...

(뭐 사실.. 이번 건 거의 얻어걸린거나.. 다름 없는지라..)

youtube.png [File Size:52.6KB/Download:45]

이 게시물을

콩까기

2014.05.17 03:03

완성되면 엄청난 에디터컴포넌트가 될거같아요..!

좋아요 댓글 신고
이즈야

2014.05.17 03:28

jQuery.ajax({url:url, data:params, ~~~}).done(function(data, status, xhr)

{

console.log(data);

});

done 함수를 통해서 리턴 값을 받을 수 있지 않을까...하네요?

좋아요 댓글 신고
애니즌

2014.05.17 04:12
우선 이런 에러가 나더라구요..

XMLHttpRequest cannot load http://uploads.gdata.youtube.com/action/FormDataUpload/AIwbFATW-vPw3VCF0hIL…Wt3xTBJg?nexturl=리턴주소. The request was redirected to '리턴주소?status=200&id=Ify9Re_6s3c', which is disallowed for cross-origin requests that require preflight.
```
var formData = new FormData($('form')[0]);
		$.ajax({
			url: '<?php echo($response->url); ?>?nexturl=<?php echo(urlencode($nexturl)); ?>',  //Server script to process data
			type: 'POST',
			xhr: function() {  // Custom XMLHttpRequest
				var myXhr = $.ajaxSettings.xhr();
				if(myXhr.upload){ // Check if upload property exists
					myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
				}
				return myXhr;
			},

			//Ajax events
	//        beforeSend: beforeSendHandler,
			success: completeHandler,
			error: errorHandler,
			// Form data
			data: formData,
			//Options to tell jQuery not to process data or worry about content-type.
			cache: false,
			contentType: false,
			processData: false
		});
	});
```
잘은 모르지만..

이런 방식에서 .done 을 넣을 수 있나요?

ie에서는 다른 에러를 뿜네용..

SEC7118: http://uploads.gdata.youtube.com/action/FormDataUpload/AIwbFASDe9nbnkGxCzlRbCg80uJH_DFqKryxQDiIUunaXe2VzG5b41mtHiFOaF9nnQrYgNmXyBeX4xWNz4f6YfTYQKltc4klLg?nexturl=의 XMLHttpRequest에는 CORS(Cross Origin Resource Sharing)가 필요합니다.
파일: uccupload.php

SEC7119: http://uploads.gdata.youtube.com/action/FormDataUpload/AIwbFASDe9nbnkGxCzlRbCg80uJH_DFqKryxQDiIUunaXe2VzG5b41mtHiFOaF9nnQrYgNmXyBeX4xWNz4f6YfTYQKltc4klLg?nexturl=의 XMLHttpRequest에는 CORS 실행 전 항목이 필요합니다.

원본 null이(가) Access-Control-Allow-Origin 헤더에 없습니다.

SCRIPT7002: XMLHttpRequest: 네트워크 오류 0x80070005, 액세스가 거부되었습니다.

음.. 구글링 좀 해봤는데..

딱히 처리 방법이 없는 것 같네요..-_ㅠ...

저와 같은 기능을 구현하려고 외국분들도 많이 질문이 있는데

결과적으론 방법이 없다.. 였고..

data api v3 로 하는 방법이 있다고는 하는데..

정확한 방법이 없으니...끄응..ㅠ
좋아요 댓글 신고
애니즌

2014.05.17 04:30

음.. 일단은 ajax cross도메인 에러군요..-_-;;

인터넷을 찾다보니 새로운 사실을 알게 되었네요...

이거 은근히 복잡하군요..ㅡ.ㅡ;; 그냥 두개를 날려버려..?! ㄷㄷ

좋아요 댓글 신고
prologos

2014.05.17 03:59

사용가능한 리턴값이 있습니다. json형이고 아래 페이지 참고하세요 ^^

https://developers.google.com/youtube/v3/docs/videos#resource

좋아요 댓글 신고
애니즌

2014.05.17 04:13

음.. json을 쓸 줄 모릅니다...터..털썩..ㅠㅠ

좋아요 댓글 신고
혼마_메이코

2014.05.17 04:02

오와... 빨리 개발되서 사용할 수 있었으면 =_=...

좋아요 댓글 신고
애니즌

2014.05.17 04:14

빨리 배포하고 싶은 마음이 간절하긴 한데..ㅠㅠ

아직 에디터컴포넌트는 시작도 안하고 있으니...-_-;;;

일단 업로더 부분이 해결되야.. 컴포넌트 코드를 파보든 할텐데 말이죠..

뭐.,. url 입력방식이든..해서.. 먼저 만들어도 되긴 하지만..

컴포넌트 파는데 시간이 많이 걸릴..(머리 아플 생각하니.. 망설여진다죠..ㅎㅎㅎ)

저같은 초보는 그냥 이것저것 넣어보고 되면 앗싸~ 안되면 에잉 안되네... 이런식으로 마구잡이로 넣는 지라..

좋아요 댓글 신고
혼마_메이코

2014.05.17 04:42

야매코딩은 건강에 이롭습니다.

좋아요 댓글 신고
애니즌

2014.05.17 05:16

결론 적으로 보면... -_-;;

Access-Control-Allow-Origin ..

즉.. 기본적으로 ajax는 같은 도메인이 아니면 거부한다고 하더군요..-_-;;

이렇게 벽에 부딪히고 마네요.. 끙..-_-;;

<?php

header("Access-Control-Allow-Origin: *");

?>

이런식으로 날려도 마찬가지니.. 쩝;;

좋아요 댓글 신고
애니즌

2014.05.17 07:34

지금까지 구글링 해본 결과.. 방법이 없네요..-_-;;;

ajax로 구현한 방법으로는 불가능하다..! 입니다.

그나마 찾다보니 flash uploader로 하는 방법이 있긴한데...

업로드까지 잘되고 페이지 리턴까지 되는데... 문제는 아이디값을 어떻게 받는지 모르겠군요..-_-.....

아무튼 일단은 여기까지...입니다.

(progress bar는 포기해야할 듯.......쩝..)

좋아요 댓글 신고
oscarmike

2014.05.17 10:14

헉;; 이거 대박인데요...ㅠㅠㅠㅠㅠㅠㅠ 아 최고..

좋아요 댓글 신고
KrteamENT

2014.05.17 10:31

API연결을 통한 유튜브에 업로드 하는건가요?

Camtasia 8 의 업로드 방식도 그러한거 같던데..~_~

좋아요 댓글 신고
애니즌

2014.05.17 10:53

네 맞습니다 API를 이용합니다~

근데.. 문제는... 업로드 진행 바 구현이 어렵네요...

좋아요 댓글 신고
prologos

2014.05.17 11:20

혹시 위의 자료 공개 가능하신가요? 같이 살펴보고 싶은데요 ^^;

좋아요 댓글 신고
애니즌

2014.05.17 13:17

물론 공개! 배포할 생각입니다!

근데 아직은 누구에게 보여주기도 민망한 수준이라.. 좀만 자체적으로 해결해보고 공개하겠습니다.

좋아요 댓글 신고
misol

2014.05.17 12:10

지금까지 만드신 코드를 오픈하시면, 좀 더 효율적인 이야기를 할 수 있지 않을까 싶습니다 ^^

좋아요 댓글 신고
애니즌

2014.05.17 13:17

물론 공개! 배포할 생각입니다!

근데 아직은 누구에게 보여주기도 민망한 수준이라.. 좀만 자체적으로 해결해보고 공개하겠습니다.

어차피 제가 만든 코드는 거의 없어서 ^^;; 다 인터넷에서 조합한 겁니다..ㅎㅎ

일단은 좀 자고 올게요..

좋아요 댓글 신고
이즈야

2014.05.17 17:50

json 말고 jsonp 타입을 사용하세요.
Callback 방식을 사용해 크로스 도메인을 회피합니다만, 문제는 서버에서 지원을 해줘야 ㅎㅎ

좋아요 댓글 신고
애니즌

2014.05.17 23:52

문제는 그게... 받는 쪽에서 지원이 되야 한다고 하더라구요.. 털썩..

좋아요 댓글 신고

글쓴이	제목	최종 글
정찬명	XE 공식 사이트 개편 인사. [6]	2011.01.19 _by 현원
misol	이 게시판.. 코드 어디가 안닫히거나 한 것 같습니다. [3]	2011.01.19 _by XE Developers
디제이쿠	검색 기능 강화를 요청 드립니다.. [2]	2011.01.20 _by sejin7940
토치송	두 gif 파일들 버그가 있네요
zero	소오강호 사용자 관련.
백성찬	스마트 폰 사용자 중 언어를 한국어, 영어를 제외한 다른 언어를 사용하시는 분 테스트 부탁합니다. [11]	2011.01.23 _by 백성찬
sejin7940	XE에 바라는 카테고리(분류) 기능의 추가 사항입니다 ^^;
라르게덴	XE 대문에 xe팁 대신 개발자포럼을 다는건 어떤가요? [1]	2011.01.23 _by ㅇㅎㅇㅀㅇㅀ
pjb7687	Admin Page에서 항목을 Submit했을 때 언어가 바뀌는 문제.. [1]	2011.01.23 _by ㅇㅎㅇㅀㅇㅀ
백성찬	줄바꿈 문제 [7]	2011.01.23 _by ㅇㅎㅇㅀㅇㅀ
ForHanbi	템플릿 문법 이상합니다. 문제점 좀 봐주세요. [1]	2011.01.23 _by ㅇㅎㅇㅀㅇㅀ
SMaker	정말 에디터 스킨 설정 관련해서 뜯어고치고 싶네요
포토올/wow	XE에 몇가지 기능 개선 건의드립니다. [1]	2011.01.23 _by ㅇㅎㅇㅀㅇㅀ
시니시즘	한가지 건의드리고 싶습니다
백성찬	r8032 부터 수정 된 db 관련 궁금증 [2]	2011.01.23 _by ㅇㅎㅇㅀㅇㅀ
zero	개발 참여에 대해서.. [4]	2011.01.23 _by ㅇㅎㅇㅀㅇㅀ
백성찬	r8032 관련 [5]	2011.01.23 _by ㅇㅎㅇㅀㅇㅀ
fsfsdas	레이아웃의 info.xml을 전면 재작성 도중 궁금증 [5]	2011.01.24 _by Hammer
SMaker	쿼리 실행 실패 시 정확한 오류를 알려주었으면 좋겠네요.
fsfsdas	r8046 XE 설치에러 [2]	2011.01.25 _by fsfsdas

태그 쓰기

포럼

유튜브 에디터 컴포넌트..? 제작을 위한 사전 작업 중입니다.

댓글 20

콩까기

이즈야

애니즌

애니즌

prologos

애니즌

혼마_메이코

애니즌

혼마_메이코

애니즌

애니즌

oscarmike

KrteamENT

애니즌

prologos

애니즌

misol

애니즌

이즈야

애니즌

About

Get involved

Blog

Download

Support

Showcase