포럼
유튜브 에디터 컴포넌트..? 제작을 위한 사전 작업 중입니다.
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'];
이런식으로 결과값을 받도록 되어 있더군요
아무튼.. 이건 좀 더 머리를 굴려봐야 겠네요...
(뭐 사실.. 이번 건 거의 얻어걸린거나.. 다름 없는지라..)
댓글 20
-
콩까기
2014.05.17 03:03
-
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.phpSEC7119: 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
물론 공개! 배포할 생각입니다!
근데 아직은 누구에게 보여주기도 민망한 수준이라.. 좀만 자체적으로 해결해보고 공개하겠습니다.
어차피 제가 만든 코드는 거의 없어서 ^^;; 다 인터넷에서 조합한 겁니다..ㅎㅎ
일단은 좀 자고 올게요..
-
json 말고 jsonp 타입을 사용하세요.
Callback 방식을 사용해 크로스 도메인을 회피합니다만, 문제는 서버에서 지원을 해줘야 ㅎㅎ -
애니즌
2014.05.17 23:52
문제는 그게... 받는 쪽에서 지원이 되야 한다고 하더라구요.. 털썩..
완성되면 엄청난 에디터컴포넌트가 될거같아요..!