Pull to refresh

jQuery плагин, для Ajax загрузки видео на YouTube

jQuery *
Sandbox
Недавно я написал небольшой плагин на jQuery и PHP. Функционал простой: посредством Ajax задается описание и загружается видео на YouTube, плагин вернет статус загрузки, и если она прошла успешно — id видео. Плагин может применяться на любом сайте, и легко вставляется в любую CMS.

Все началось с того, что при разработке CMS для сайта местного телеканала я столкнулся с необходимостью сделать загрузку видеороликов на YouTube. Так как на сайт часто будут добавлять видео, то каждый раз логиниться на YouTube, заливать туда ролик, получать на него ссылку, лезть в CMS и вставлять её туда — очень напряжно. Причем, желательно делать это через Ajax, чтоб можно было легко включить плагин в любой проект.


Готовое решение того, как это сделать я не нашел, зато наткнулся на два интересных материала:

http://habrahabr.ru/blogs/webdev/69006/
— Здесь подробно описано то, как сделать загрузку посредством PHP. Однако, мне нужен был ещё и Ajax.

http://zlob.in/2010/youtube-api-javascript-upload/
— Здесь же присутствует необходимая функция загрузки видео через Ajax, но нет серверной части. То есть, у нас уже должны быть получены token и URL загрузки. Сам автор пишет, что использует скрипт в связке с FLEX.

Объединив два этих решения, покопавшись в документации, я добавил возможность задания описания видео, и, в принципе, получил то, что было нужно. Но, после всего, появилось желание немного расширить функционал и оформить всё это в виде готового плагина, которым в идеале сможет пользоваться любой.

Скачать архив с плагином и демо можно здесь,
и на всякий случай зеркало.

Как использовать


Первым делом нужно отредактировать файл setup.php, в котором нужно указать название проекта, ключ разработчика, логин и пароль для входа в YouTube.

Получить ключ разработчика можно здесь.
На этой странице указываем название вашего проекта и URL сайта,
откуда будет загружаться видео, после чего нам дадут ключ, вроде этого:
AI39si6Am9JZwKhJlrJGZUg0UU7URgTl9IGfSp2PZw2wAiWC33SfIGb2k3lhVRf-XLKnmhTiFnqDFv_9YgRgdK5qVWQQC_DlqQ

На этом настройка серверной части закончена.

Теперь подключаем на нашу страницу сам плагин. Для его работы необходим jQuery, желательно последней версии:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>


Подключаем плагин:
<script type='text/javascript' src='yt_ajaxfileupload.js'></script>


По нажатию на кнопку загрузки, запускаем плагин:
$('#buttonUpload').click(function() {
          
          $.uploadVideo("/yt_upload/connect.php", "fileToUpload",
          { title: $("#v_title").val(),
            description: $("#v_description").val(),
            category: $("#v_category").val(),
            keywords: $("#v_keywords").val()},
          function (){
            $("#loader").html("Uploading...");
          },
          function (data){
            $("#loader").html("");
            alert(data.status);
            alert(data.id);
        });

});

* This source code was highlighted with Source Code Highlighter.


Функция $.uploadVideo принимает 5 аргументов:

1) Путь к connect.php (лежит в папке с плагином)
2) Id элемента выбора файла
3) Описание видео: название, описание, категория, ключевые слова
4) Функция, которая выполнится во время загрузки (например можно показать что процесс загрузки запущен)
5) Callback функция окончания загрузки, возвращает статус и id видео

Создаем форму:
<form name="form" id="form-send" action="" method="POST" enctype="multipart/form-data">
          <label for="v_title">Название:</label>
      <input type="text" name="v_title" id="v_title" value="" /> <br /><br />
          
      <label for="v_description">Описание:</label>
          <input type="text" name="v_description" id="v_description" value="" /> <br /><br />
          
      <label for="v_category">Категория:</label>
          <select id="v_category" name="v_category">
            <option selected="" value="Autos">Авто и транспорт</option>
            <option value="Movies_Comedy">Юмор</option>
            <option value="Education">Образование</option>
            <option value="Entertainment">Кино и ТВ</option>
            <option value="Movies_Anime_animation">Фильмы и анимация</option>
            <option value="Games">Компьютерные игры</option>
            <option value="Howto">Обучение и стиль</option>
            <option value="Music">Музыка</option>
            <option value="Новости">Новости и политика</option>
            <option value="Nonprofit">Общественные акции</option>
            <option value="People">Люди и блоги</option>
            <option value="Animals">Животные</option>
            <option value="Tech">Наука и техника</option>
            <option value="Sports">Спорт</option>
            <option value="Travel">Путешествия и события</option>
          </select>
          <br /><br />

          <label for="v_keywords">Ключевые слова:</label>
          <input type="text" name="v_title" id="v_keywords" value="" />
        </div>
        <br /><br />
        <input type="hidden" name="yttoken" id="yttoken" value="">
        <input type="hidden" name="yturl" id="yturl" value="">
        <input id="fileToUpload" type="file" size="15" name="fileToUpload" class="input">
        <button id="buttonUpload">Загрузить</button>
        <br /><br />
</form>

* This source code was highlighted with Source Code Highlighter.


Для успешной загрузки, все поля формы обязателны для заполнения.

Хочу заранее предостеречь по поводу категории видео: YouTube API принимает только те категории,
которые описаны в этом xml: http://gdata.youtube.com/schemas/2007/categories.cat

На этом все, в комментариях приветствую замечания и предложения, так как это мой первый опыт в написании плагина, до этого дальше простых манипуляций с DOM не заходил.

P.S.: Если из статьи что-то непонятно, то в исходном коде есть много поясняющих комментариев.

UPD: Старые ссылки на архив больше не работают, выложил немного обновленную версию, с cURL версией загрузчика: скачать
Tags:
Hubs:
Total votes 51: ↑48 and ↓3 +45
Views 11K
Comments Comments 15