TYZEN's NETLOG

2009년 12월에 처음으로 오픈한 MOVYX.COM 이 근 4년만에 새롭게 업그레이드 했습니다. 처음에는 거의 복제와 짜집기 수준으로 약간 조잡했으나 4년간의 YouTube API 내공으로 제 스타일로 업그레이드 했습니다. MOVYX의 주요 특징으로는 다음과 같습니다. JavaScript로 작성한 유튜브 동영상 검색엔진 스크립트입니다. YouTube JSON-C format을 사용하였고, next 버튼을 이용해 검색어의 영상을 모두 찾을 수 있으며, 비디오 정보 썸네일이 Drag & Drop이 가능하여 Playlist를 구성하실 수 있습니다. 또한 사용자와 유튜브 Playlist 검색기능이 있어서 한페이지 내에서 동영상 검색을 쉽게 처리할 수 있습니다. 특히 자신이 좋아하는 음악을 구성하여 논스탑으로 ..

현재 유튜브에서 버젼 3으로 업데이트 되어 사용이 불가능합니다. 시간이 나면 업데이트 하도록 하겠습니다. 간만에 업데이트 했습니다. 현재 버젼은 1.5 입니다. 추가사항: 1. 메뉴바 Autohide 기능 추가 2. 썸네일 재생시간 표시 추가 3. Button 수정 (back & next 버튼 수정 ) 4. 아이템 수 표시 5. jQeury 삭제 썸네일 플레이 재생시간 표시기능은 투선 커뮤니티를 참조하였습니다. 진심으로 감사합니다. 안녕하세요! YouTube API 매니아 TYZEN입니다. 요즘 계속해서 YouTube API와 관련해서 많은 문의가 발생을 하고, 제가 작성한 것을 동의없이 사용하는 경우가 많이 발생을 해서 YouTube API 검색엔진 Script를 공개를 하고자 합니다. 제가 작성한 프..

TEXTTUBE is a closed source PHP library that displays gorgeous YouTube video galleries in TEXTCUBE.It's NOT available as a TEXTCUBE plugin or as a stand-alone PHP library. but You can make it! 작년 봄에 texttube.org 로 오픈을 했는데, http://texttube.com 닷컴 도메인을 소유하고 싶어서 일년을 기다렸습니다. 합성어 인데도 경쟁이 조금 있더군요. 요즘 자금의 여유가 있어서 과감하게 여러 등록처에 베팅을 했더니, 그 중에 하나 제 이름으로 등록이 되었더군요. TEXTTUBE는 복제없이 순수하게 제 힘으로 제작을 하였습니다. PHP와 ..

YouTube API Search Engine Script 두 번째 버젼인 MIXVI 입니다. 그동안 YouTube API를 배워가면서 익힌 모든 것을 집약하였습니다. 현재 가장 빠른 응답을 보이는 JSON-C 포맷은 아니지만, 동영상 검색 정보를 쉽게 확인하실 수 있으며, 본문에 제목과 저자까지 담았습니다. 그리고 유튜브 채널의 아이디를 클릭하시면 각 채널별 동영상도 모두 검색 하실 수 있습니다. 이제는 YouTube에서 제공하는 AS3 플레이어도 광고가 삽입이 되는 점이 많이 아쉽습니다. 제가 공개하는 스크립트는 MIXVI 버젼으로 자바스크립트로 작성하였으며, 소스를 이용해 어느 곳에서도 사용하실 수 있습니다. 또한 현재 운영되는 MIXVI와 공개하는 Script는 조금 다릅니다. 공개 버젼은 한페이..

Random 유튜브 비디오에서 영감을 받고, 방금 전에 제작한 YouTube Time Machine을 합쳐서 한번 만들어 보았습니다. JavaScript의 math.random을 응용해서 만들어 졌으며, 하단 랜덤버튼을 클릭하시면 랜덤으로 키워드와 일치하는 동영상으로 플레이어가 변경이 됩니다. Random Youtube Video

YouTube Time Machine 에서 영감을 받아서 저도 한 번 유튜브 타임머신을 만들어 보았습니다. Jquery UI 만 조금더 공부한 다음에 업그레이드 하도록 하겠습니다. 원리는 상당히 간단합니다. 유튜브의 검색어를 그냥 해당 연도로 하고, 썸네일 없이 플레이어만 바뀌도록 하였습니다. 1700 1710 1720 1730 1740 1750 1760 1770 1780 1790 1800 1810 1820 1830 1840 1850 1860 1870 1880 1890 1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000 2010 2020

YouTube에서 제공하는 Thumbnail 이미지 주소를 사용해 블로그나 홈페이지에 활용하는 방법에 대해 알아보도록 하겠습니다.(YouTube API 참조) 유튜브에서 제공하는 비디오 이미지는 크게 5개 입니다. YouTube Video Demo Thumbnail URL http://img.youtube.com/vi/"+Video id+"/"+nr+".jpg 1. http://img.youtube.com/vi/nms_pQxjycM/1.jpg 2. http://img.youtube.com/vi/nms_pQxjycM/2.jpg 3. http://img.youtube.com/vi/nms_pQxjycM/3.jpg 4. http://img.youtube.com/vi/nms_pQxjycM/default.jpg 5..

Random 유튜브 비디오에서 영감을 받고, 스페인 친구가 의뢰를 하여서 한번 만들어 보았습니다. JavaScript의 math.random을 응용해서 만들어 졌으며 원하는 키워드를 사전에 입력을 하시면, 랜덤으로 키워드와 일치하는 동영상 정보가 나타납니다. 처음에는 어떻게 시작을 해야할지 막막했었는데, 인터넷 초기 JavaScript 랜덤 예제를 살짝 바꿔주니 쉽게 되더군요. 필요하신 분은 다운 받아쓰셔도 됩니다. MIXVI나 QUVIC을 사용하고 계신다면, index.html 에서 아래처럼 변경을 해주시면 됩니다. DEMO http://texttube.org/random

지난달에 시험삼아서 QUVIC Script를 HotScripts.com에 등록 하였는데, 오늘 드디어 승인이 되었네요 제가 만든것을 외국에서도 인정을 해주는 군요^^ 앞으로도 시간나면 업데이트 하여 계속 올려 봐야 겠습니다. Congratulations! Your recent submission to HotScripts.com has been approved, and your resource is now included in the Internet's web resource directory! Below is a synopsis of your submission: --------------------------------------------------------------------------- Tit..

TEXTTUBE is a closed source PHP library that displays gorgeous YouTube video galleries in TEXTCUBE. It's NOT available as a TEXTCUBE plugin or as a stand-alone PHP library. but You can make it! 몇일전에 작성한 PHP에서 유튜브 API 활용편을 참조로 하여 직접 도메인도 구입하고, 호스팅 서비스를 받아서 사이트를 개설하여 보았습니다. MOVYX는 99% 복제 였었는데, TEXTTUBE는 복제없이 순수하게 제 힘으로 제작을 하였습니다. PHP와 JavaScript를 배우기위해 도서관에서 책을 빌려가면서 했었습니다. 하나 둘씩 스크립트를 수정 했던것이 제가 ..

온라인 동영상 공유 사이트로는 유튜브가 단연 독보적인 인기를 끌고 있습니다. 현재 viacom과 저작권과 관련하여 법정 다툼을 벌이고 있지만, 어떻게 결과가 나올지도 정말 기대가 되고 궁금합니다. 유튜브는 현재 동시대에 가장 많은 동영상을 보유한 사이트 입니다. 매일 새로 올라오는 동영상 수가 수십만 개에 이르며, 하루 페이지 조회 수만도 수십억 회에 이릅니다. 유튜브는 홈 동영상뿐만 아니라 음악 동영상, TV 쇼 클립, 개봉할 영화 예고편, 애니메이션 클립 등 온갖 동영상을 제공합니다. 사용자는 동영상에 키워드 태그를 추가할 수 있으며, 특정 시점에서 가장 인기 있는 동영상을 감상할 수도 있습니다. 유튜브가 제공하는 멋진 기능 중 하나가 유튜브 API 입니다. YouTube API를 사용하여 언제 어느..

동영상 Lightbox 세번째 갤러리 Fancy Box 입니다. 파이어폭스에서는 안되네요^^

Videobox를 이용해 유튜브 갤러리를 만들 수 있습니다. 정말 간단합니다. Download 3 javascript files css file(for the styles) URL our video

이번 시간에는 지금까지 학습한 것을 응용해 누구나 이용할 수 있도록 사용자가 좀더 쉽고 편한 방법으로 접근을 하고, 유튜브계정에 등록한 즐겨찾기 또는 재생목록을 이용해 갤러리를 만들고 자동플레이(순차적재생) 하는 방법에 대해 알아보도록 하겠습니다. 일반적인 순차적재생은 DB로 연결해서 사용하는 것으로 알고 있는데, 저는 아직 실력이 부족해서 그 방법은 잘 모르겠습니다. 제가 사용한 방법은 동영상이 끝나기 1초전에 강제로 정지시키고, 다음 영상을 로딩시키는 방법을 사용하였습니다. 그리고 만약에 유튜브 이용자가 많을 경우 다음영상이 바로 로딩이 되질 않아서 먹통이 되는 경우도 있습니다. 정상적일 경우 Never Stop이 됩니다. DEMO : My Playlists & Autoplay Source 자동플레이..

jQuery Plugin nyromodal을 이용해 유튜브 갤러리를 만들 수 있습니다. 정말 간단합니다. 이 외에도 많은 라이트박스 효과가 있습니다. Videobox

유튜브 플레이어 API 를 통해 유튜브에서 제공하는 플레이어들을 살펴보고, 동영상 변경이 가능한 방법과 다양한 효과에 대해서 살펴 보았습니다. 그리고 유튜브 DATA API를 통해 동영상 DATA를 처리하는 방법 또한 살펴 보았습니다. 이번에는 썸네일 첫번째 영상을 자동으로 플레이어에 로딩 시키고 썸네일 클릭시 플레이어도 변경시키는 좀 더 쉽고 간결한 방법에 대해서 알아 보도록 하겠습니다. 동영상 변경시 플레이어도 같이 변경이 됩니다.

YouTube API 마지막 시리즈인 Thumbnail에 효과를 주는 것에 대해 살펴 보도록 하겠습니다. 아래 내용은 저의 개인적인 취향이므로 참고하는 정도로 활용하시면 되겠습니다. 1. Title 글자 수 조정 위의 마지막 DEMO에서 Title의 글자수가 모두 나옵니다. 줄여 주고 싶을 경우 .substr(0,40) 를 추가하여 글자 수를 통일하거나 줄여줍니다. 40을 조정하여 원하는 글자수로 조정합니다. html.push(' ', title.substr(0,40), '');} 2. Thumbnail Animation & Hover Effects 시간대 별로 넘버링된 이미지 번호, videoID와 image border를 활용하면 애니메이션과 후버 효과를 나타낼 수 있습니다. html.push('')..

유튜브 플레이어 API 를 통해 유튜브에서 제공하는 플레이어들을 살펴보고, 동영상 변경이 가능한 방법과 다양한 효과에 대해서 살펴 보았습니다. 그리고 유튜브 DATA API를 통해 동영상 DATA를 처리하는 방법 또한 살펴 보았습니다. 이번에는 썸네일 첫번째 영상을 자동으로 플레이어에 로딩 시키는 좀 더 쉽고 간결한 방법에 대해서 알아 보도록 하겠습니다. 아래 문장에서 i 는 비디오 정보의 노드인 items의 넘버를 나타냅니다. 만약 썸네일의 갯수가 10개라면 i 는 0에서 시작하여 9로 끝나게 됩니다. 그러므로 첫 번째 동영상 정보는 i=0 이 됩니다. loadingVideo 라는 새로운 function을 만들어 아래처럼 하여 작성하여 주면 처음으로 표시되는 썸네일의 영상이 자동으로 로딩이 됩니다. 자..

Loading... Loading...

유튜브 API 두번째 시리즈 유튜브 DATA API 입니다. 앞에서 작성한 유튜브 플레이어 API를 통해 동영상 내용물이 변경 가능하도록 하였습니다. 유튜브 API에서 가장 핵심인 유튜브 DATA API 에 대해 살펴보도록 하겠습니다. 제가 컴관련 지식이 얇으므로 제가 아는 한도내에서 설명을 하도록 하겠습니다. 그리고 어려운 전문용어는 저도 모를 뿐더러, 설명에 방해가 되므로 최대한 쉬운 설명으로 하겠습니다. 유튜브 DATA API를 이용하는 목적은 방대한 유튜브 영상중 사용자가 원하는 영상정보를 얻어서 웹상으로 표현하여 간편히 시청 할 수 있도록 하기 위함입니다. 즉. 보고싶은 영상정보들을 썸네일로 표현하는 것입니다. 보고싶은 영상을 요청하는 방법은 JSON(자바스크립트객체) 방식을 이용하는 것입니다...

Resize Player 유튜브 플레이어의 크기를 조절하여, 16:9 혹은 4:3 비율로 시청하실 수 있거나 다양한 크기로 동영상을 시청하실 수 있습니다. 2009년 전까지만 하더라도 표준비율인 4:3 비율로 주로 업로드가 되었으나, 현재는 대부분의 사용자가 황금비율인 16:9 비율로 업로드가 되고 있습니다. 비율이 통일이 되질않아서 하나의 비율로 고정을 할 경우 검정색 레터박스가 보여지게 됩니다. 그러한 검정색 레터박스가 보기 싫거나 웹화면에서 다양한 크기로 변경하고자 하는 분들은 아래의 소스를 이용하시길 바랍니다. 이용시 주의할 점은 "ytPlayer" 속성을 일치시켜야 합니다. /** * Resizing the player in JavaScript. */ // Make the player small..

유튜브 API 첫번째 시리즈 유튜브 플레이어 API 입니다. 현재 유튜브에서 제공하는 플레이어는 3가지 종류가 있습니다. 일반적인 embedded 플레이어, 새롭게 출시된 ActionScript 버젼3 플레이어, 그리고 크롬리스 플레이어 입니다. 각 플레이어마다 고유의 특징을 가지고 있습니다. 플레이를 실행하시면 느끼실 수 있을 것입니다. AS3과 크롬리스는 관련동영상이 제공되지 않으며 그리고 광고없이 시청을 하실 수 있습니다. 유튜브 플레이어 API를 이용하는 목적은 유튜브 Data API로 얻어진 검색 결과물의 영상들을 시청하실 수 있도록 하기 위함입니다. 각 플레이어의 예는 아래와 같으며, 소스도 활용하실 수 있습니다. Normal Embedded Player AS3 Embedded Player C..

유튜브에서 새롭게 제공하는 JSON-C format 과 AS3 Player를 활용하여 아래 동영상 검색엔진을 만들어 보았습니다. JSON-C format 은 기존의 JSON format 의 컴팩트버젼으로 상당히 빠른 응답을 보이고 있으며, 또한 새롭게 유튜브에서 제공하는 AS3 Player로 광고없이 고화질로 동영상을 시청하실 수 있습니다. Recently Featured | Top Rated | Most Viewed | Most Popular Get This Script

YouTube API를 사용하여 언제 어느 화면에서든 YouTube를 볼 수 있습니다. YouTube API 및 도구를 사용하면 YouTube의 동영상 콘텐츠와 기능을 당신의 웹사이트, 소프트웨어 응용프로그램 또는 장치에 통합할 수 있습니다. 플레이어 API와 데이터 API 플레이어 API를 사용하여 자신의 웹사이트에서 YouTube 동영상 재생을 제어할 수 있습니다. 기본 설정을 구성하고 플레이어 인터페이스를 조정하며 고유한 플레이어 컨트롤을 만들 수 있습니다. 데이터 API를 사용하여 자신의 응용프로그램이나 웹사이트에 YouTube 기능을 포함시킬 수 있습니다. 검색, 동영상 업로드, 재생목록 작성 등의 작업을 할 수 있습니다. 유튜브가 제공하는 멋진 기능 중 하나가 유튜브 API 입니다. 유튜브 A..

Recently Featured | Top Rated | Most Viewed | Most Popular

iPhone 에서도 가능한 유튜브 동영상 검색엔진 입니다. Motoroi도 가능합니다. 쌤쏭 갤럭시S는 안되네요^^ 플레이어내에서 변경하는 것이 아니라 오브젝트를 클릭시 마다 변경시켜 줌으로 인해 가능합니다. 또한 해당 비디오 정보를 상세하게 보실 수 있습니다. Recently Featured | Top Rated | Most Viewed | Most Popular Get This Script

3개월간 유튜브 API를 공부하면서 알게된 유튜브 활용방법에 대해 알아보도록 하겠습니다. 좀더 편하고 다른 방법을 찾고 계신다면 아래의 방법을 이용해 보세요. 1. 다운로드 간편히 유튜브 영상을 다운로드 받을 수 있는 방법 a. Real Player 인터넷 초기에 많은 인기를 누렸던 real player를 설치하여 다운을 받는 것입니다. 설치를 해주시면 동영상을 시청할 경우 자동적으로 다운로드 버튼이 생성됩니다. a. firefox addon Easy YouTube Video Downloader 파이어폭스 브라우져를 사용하고 계신다면 위의 애드온을 설치하여 유튜브 사이트내에서 시청할 경우 자동적으로 다운로드 버튼이 생성이 됩니다. 2. 버퍼링 줄이기 동영상을 시청하다 보면 자주 버퍼링이 발생이 됩니다. ..

2년전 이맘 때 UCC라는 단어가 유행할 때 싸이월드에 처음으로 소니베가스와 버츄얼덥으로 편집하여 뮤직비디오와 영화속 명장면들을 헤비하게 업로드 하던 기억이 납니다. 거의 200여편에 가까운 동영상인데, 모두 저작권에 위반되는 영상들 이었습니다. 그때의 과제는 어떻게 하면 검은색 바탕인 레터박스 없이, 최고의 음질과 화질로 업로드하는 것 이었습니다. 화면 비율과 코덱을 알면서부터 자연스레 해결이 되더군요. 이제는 2년이 지나서, 업로드보다는 WEB 2.0시대에 발맞추어 블로그에 융합할 수 있는 YouTube API에 도전을 하게 되었습니다. 처음의 시작은 소스보기를 통한 복사 붙여넣기 였습니다. 제가 제작한 MOVYX도 거의 복제와 짜집기에 의한 것입니다. 대략 3개월간의 정보수집을 통해 제작을 할 수 ..

유튜브 동영상갤러리를 누구나 편하고 가장 쉽게 만드는 방법은 없을까? 계속해서 유튜브와 관련하여 정보를 수집하면서, 가장 편한 방법을 찾고자 노력을 했었습니다. 가장 쉽고, 사용하기 편한 방법인 JW Player를 활용하는 것입니다. 아래 영상들은 제가 유튜브 영상중에 재생목록(playlist)로 등록한 동영상 입니다. 재생목록은 무한대로 playlist를 만들 수 있으므로 가장 유용하게 활용할 수 있을 것 입니다. 오늘 뒤늦게 유튜브 검색기 플러그인을 설치하였습니다. 검색기를 이용하셔서 원하시는 동영상도 시청하실 수 있습니다. 홈페이지나 XE에서는 모두 가능합니다. This text will be replaced JW Player의 장점은 유튜브 광고가 없고, 유튜브 페이지로 이동없이 동일 페이지내에서..

유튜브 동영상을 페이지 이동없이 동일 페이지내에서 볼수는 없을까? 계속해서 동영상 갤러리를 만들면서 누구나 쉽게 할 수 있는 방법을 찾게 되었습니다. 제가 사용을 하면서 가장 편하고 좋은 소스이어서, 동영상 갤러리를 만들고자 하는 분들에게 소개를 하고자 합니다. 처음에는 아무것도 몰라서 무식한 방법으로 소스를 그대로 복사하여 붙여넣기 하기도 하였습니다. 어떤것은 되고, 또 어떤것은 불가능하고 여러번의 시행착오를 거쳐서 찾게 되었는데, 가장 쉬운 방법인 JSON을 이용한 방법입니다. 누구나 간편하게 소스를 복사하여 붙여넣기를 하면 됩니다. 그리고 비디오 선택은 앞에서 작성한 Video Feeds URL을 참조합니다. 보다 디테일한 검색을 위해서는 여기를 참조하시길 바랍니다. 즉, 소스에서 Video Fee..