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

Недавно я написал небольшой плагин на 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 версией загрузчика: скачать
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 15

  • UFO just landed and posted this here
      +1
      В официальной документации пишут, что не более 2000 видео на 1 аккаунт, при добавлении через API, а также длина видео не может превышать 10 минут и размер видео не может превышать 1 ГБ.
      • UFO just landed and posted this here
          +2
          длина видео не может превышать 10 минут

          И всё-таки не 10 минут, а 15 см. code.google.com/intl/en-EN/apis/youtube/faq.html#limits
            0
            Видимо русскую документацию ещё не обновили: code.google.com/intl/ru/apis/youtube/faq.html#limits
              +13
              прочел как 15 сантиметров :)
                0
                А разве уже ограничение не сняли? Вот у меня в аккаунте, на сайте ютуба при загрузке видео вижу это:
                Поздравляем! В ваш аккаунт теперь можно загружать видео длительностью более 15 минут. Нажмите кнопку «Загрузить», чтобы выбрать видео.?
                Или к загрузке через API это отношения не имеет?
                  0
                  Или к загрузке через API это отношения не имеет
            0
            спасибо, пригодится для загрузки и хранения каких-либо учебных видео-обзоров)
              +4
              не за что, в ближайшее время думаю сделать следующую версию, добавить возможность обновления, удаления, и работу со списками видео
              0
              Большое спасибо, очень полезная штука! Уже давно хочу организовать сервис для посетителей своего сайта, чтобы они могли загружать через API ютуба видео и размещать его на сайте.
                0
                У кого-нибудь работает под ie 7-8?
                  0
                  Автору спасибо за плагин.

                  Чтобы в IE заработало, нужно поправить вызов event.preventDefault() согласно документации api.jquery.com/event.preventDefault/

                  1) yt_ajaxfileupload.js, закомментировать 24ю строку:

                  // Предотвращаем действие кнопки по умолчанию, которое отправит первую форму, и перезагрузит страницу
                  // event.preventDefault();



                  2) demo/index.html, строка 13, немного доработать обработчик клика по кнопке «Загрузить»:

                    $('#buttonUpload').click(function(event) {
                    event.preventDefault();

                  0
                  Дополнение к обновлённой версии плагина:
                  1. если используете CURL, то в «connect.php» меняем «functions.php» на «CURL_functions.php»;
                  2. в папку «demo» добавляете файл «.htaccess» со строчкой «AddDefaultCharset UTF-8»;
                  3. браузер «ругается» на то, что «event» не определён, поэтому в «yt_ajaxfileupload[.min].js» комментируем «event.preventDefault();», а для предотвращения действия кнопки по умолчанию, в конец функции «$('#buttonUpload').click(function()» просто дописываем «return false;»;
                  4. для полного соответсвия API, в функцию «ytConn()» добавляем «$request.=«GData-Version: 2\r\n»;», думаю, понятно, куда, и в переменной «$data» меняем одинарные кавычки на двойные.
                    0
                    Ещё мне не очень понятно, почему в CURL_functions.php, для параметра CURLOPT_HEADER в качестве значения передаётся не истина или ложь, а массив заголовков… В документации об этом ничего не сказано.

                    Only users with full accounts can post comments. Log in, please.