В этом уроке я взгляну на API Google YouTube, который позволяет расширить возможности вашего приложения с помощью функций YouTube. YouTube является одним из «убийственных» интернет-приложений, и его трафик составляет огромную часть общего интернет-трафика.
Прежде чем начать, убедитесь, что вы прочитали Руководство по обзору API . В основном мы будем работать с API данных , который позволяет выполнять многие операции, доступные на веб-сайте YouTube (поиск видео, получение стандартных каналов, просмотр соответствующего контента и т. Д.).
API доступен на нескольких языках программирования, и мы будем использовать Java для этого урока. Прочитайте Руководство разработчика Java, чтобы получить первую идею. Также добавьте в закладки страницу JavaDoc API данных Google.
Давайте подготовим среду разработки. Сначала загрузите Java-клиент GData из соответствующего раздела загрузки . Я буду использовать версию 1.41.2 для этого урока. Обратите внимание, что существует также версия 2, но по данным сайта является экспериментальной и не совместима с версией 1.
What is an API (in 5 minutes)
Извлеките заархивированный файл, найдите папку «gdata java lib» и включите следующие JAR-файлы в classpath вашего приложения:
- данных клиент-1.0.jar
- GData-YouTube-2.0.jar
- GData-ядро-1.0.jar
- GData-медиа-1.0.jar
Далее мы должны позаботиться о зависимостях. Список пакетов зависимостей можно найти здесь .
- JavaMail API включен для поддержки медиа. Его можно скачать здесь . «Mail.jar» необходим.
- Библиотека коллекций Google также используется клиентом GData. Я скачал 1.0-финальную версию . Требуется «google-collect-1.0.jar».
Убедитесь, что все вышеупомянутые файлы JAR включены в путь к классам проекта.
Обратите внимание, что все общедоступные каналы доступны только для чтения и не требуют никакой аутентификации. Аутентифицированные операции, с другой стороны, включают в себя поиск частных каналов, таких как входящие каналы пользователя, а также операции записи, загрузки, обновления и удаления. Вам нужно будет подписаться на ключ разработчика, чтобы иметь возможность выполнять аутентифицированные операции. Для этого урока ключ не требуется.
Теперь, когда инфраструктура готова, давайте немного поговорим об API. Основным классом, который мы будем использовать, является класс YouTubeService . Это позволяет выполнять поисковые запросы, аналогичные тем, которые вы можете выполнять при просмотре веб-страницы YouTube. Каждый запрос представлен экземпляром YouTubeQuery . Результаты каждого запроса (если есть) поступают в виде объекта VideoFeed .
Из каждого канала можно получить несколько объектов VideoEntry . Из VideoEntry мы извлекаем объект YoutTubeMediaGroup . Вы можете представить этот класс в качестве заполнителя для информации о СМИ (см. Спецификацию «Media RSS» ). Затем мы получаем соответствующий MediaPlayer и, наконец, URL проигрывателя. Мы также можем получить информацию о сопровождающих миниатюрах через класс MediaThumbnail .
API простыми словами. Что такое API? | 2022
Давайте начнем с кода. Сначала мы создадим два класса моделей, которые будут использоваться для хранения информации о каналах и видео. Первый называется YouTubeMedia и содержит URL-адрес медиа-контента и тип медиа-контента. Второй называется YouTubeVideo и содержит всю информацию, касающуюся конкретного видео (URL-адрес, URL-адрес встроенного проигрывателя, миниатюры и экземпляры YoutTubeMedia). Исходный код для них следующий:
Источник: coderlessons.com
Kodi 18: Авторизация в Youtube (пошаговое руководство)
Kodi 18 выдает ошибку при попытке авторизации в приложении Youtube. Для того, чтобы все-таки авторизоваться и начать нормально пользоваться Youtube на Kodi 18, требуется создание индивидуальных ключей API.
6 апреля 2020, понедельник 00:32
altima [ ] для раздела Блоги
реклама
За пост начислено вознаграждение
Прежде для авторизации Youtube на Kodi было достаточно только два раза ввести шифр, сгенерированный на странице https://www.google.com/device
Теперь это не работает, а Kodi ругается, что ему необходимы ключи API.
реклама
Вот, что требуется сделать, чтобы получить авторизацию.
1. Пройти на страницу Google APIs.
2. Принять условия использования Google Cloud Platform.
реклама
3. нажать на кнопку «СОЗДАТЬ ПРОЕКТ» для создания нового проекта.
4. Задать название проекта: Youtube Add-on
реклама
5. Кликнуть на ссылку «+ ВКЛЮЧИТЬ API И СЕРВИСЫ»
6. Выбрать из списка «YouTube Data API v3»
реклама
7. Нажать синюю кнопку «ВКЛЮЧИТЬ»
8. На открывшейся странице нажать кнопку «СОЗДАТЬ УЧЕТНЫЕ ДАННЫЕ»
9. На вопрос «Какой API Вы используете?» выбрать в качестве ответа «YouTube Data API v3»
10. На вопрос «Откуда вы будете вызывать API?» выбрать в качестве ответа «Другое с интерфейсом пользователя (например CLI)»
11. На вопрос «К каким данным вы будете обращаться?» выбрать в качестве ответа пункт «Данные пользователя»
12. Когда все три ответа даны, нажмите на синюю кнопку «Выбрать тип учетных данных»
13. В выскочившем окошке «Настройте окно запроса доступа OAuth» нажмите на ссылку «НАСТРОИТЬ ОКНО ЗАПРОСА ДОСТУПА»
14. В браузере откроется новая вкладка или новое окно «Окно запроса доступа OAuth — API и сервисы — Youtube Add-on». Там выберите «User type» — «Внешний» и нажмите на кнопку «СОЗДАТЬ»
15. Введите «Название приложения» — «Youtube Add-on Personal» и выберите «Адрес электронной почты службы поддержки» — это будет тот адрес, по которому Вы хотите авторизовать приложение Youtube в Kodi. Нажмите «Сохранить»
16. Оставьте окно/вкладку «Окно запроса доступа OAuth — API и сервисы — Youtube Add-on» открытым.
17. Вернитесь к окну/вкладке «Выбор типа учетных данных — Youtube Add-on».
18. В пункте 2 «Создание идентификатора клиента OAuth 2.0» есть поле «Название». Заполните его, вписав туда название приложения, которое Вы задали (см. предыдущую иллюстрацию в п. 15 данного руководства).
19. На этом этапе в пункте 2 у Вас будет белая кнопка «Обновить». Нажмите ее. Вместо нее появится синяя кнопка «Создать идентификатор клиента OAuth» — такая, как на скриншоте выше. Долго на эту кнопку не смотрите — сразу нажимайте!
20. Поздравляю! Вы получили Client ID. Это — длинная ссылка из разных букв и цифр, которая заканчивается словами «apps.googleusercontent.com». Скопируйте эту ссылку в документ ворд и нажмите «Готово».
21. Загрузится список учетных данных, где будет раздел «Идентификаторы клиентов OAuth 2.0». Вэтом разделе будет таблица с Вашим «Youtube Add-on Personal». В этой таблице одна из колонок называется «Идентификатор клиента» — в ней указан Ваш «Client ID».
22. Нажмите на ссылку «+ СОЗДАТЬ УЧЕТНЫЕ ДАННЫЕ» вверху страницы. Выпадет меню, в котором выберите пункт «Ключ API».
23. Там, где на риснуке красный прямоугольник, Вы увидите очередной шифр. Скопируйте его в тот же документ ворд. Нажмите на ссылку «ЗАКРЫТЬ»!
24. Теперь в табличке «Идентификаторы клиентов OAuth 2.0» нажмите на имя «Youtube Add-on Personal». Откроется страничка, на которой Вы увидите свой «Идентификатор клиента», а также «Секретный код клиента». Скопируйте «Секретный код клиента» в документ Ворд.
25. Итак, в нашем документе ворд теперь есть 3 шифра. 1 — «Client ID» (Идентификатор клиента), 2 — «Ключ API» («API Key), 3 — «Секретный код клиента» («Client Secret»). Остается ввести эти коды в Kodi в настройках приложения Youtube. Рекомендую распечатать коды на принтере, чтобы при вводе их в Kodi они были бы перед глазами. Также рекомендую к устройству, на котором установлен Kodi, подключить клавиатуру.
Это значительно упростит ввод.
26. В Kodi откройте настройки:
27. В настройках откройте «Дополнения»
28. Выполните этот пункт инструкции, если Youtube НЕ установлен. Нажмите «Установить из репозитория», выберите «Видеодополнения», откроется длинный список, в конце которого Вы найдете Youtube. Нажмите на него, нажмите на кнопку «Установить». После этого снова нажмите на Youtube, откроется то же самое окно, но уже будет активна кнопка «Настроить». Нажмите на нее.
29. Если Youtube установлен. Зайдите в «Мои дополнения» и пройдите в «Видеодополнения». Найдите Youtube в списке. Нажмите на него. В открывшемся окне будет активна кнопка «Настроить».
Нажмите на нее.
30. В настройках Youtube есть раздел «API». Откройте его и введите эти коды.
«API Key» — это наш «Ключ API»
«API Id» — это наш «Идентификатор клиента»
«API Secret» — это наш «Секретный код клиента»
31. После ввода всех кодов нажмите ОК. и нажмите кнопку «Открыть», чтобы открыть приложение Youtube. Когда оно откроется, нажмите «Авторизация».
32. Выскочит окошко с просьбой перейти по адресу https://www.google.com/device» и ввести там предложенный код. Выполняйте. Выберите аккаунт для привязки, нажмите синюю кнопку «Разрешить».
33. Введя один код, Вы увидите, что Kodi попросил Вас еще раз выполнить предыдущий пункт. Выполняйте.
34. После нажатия на кнопку «Разрешить» Вы увидите вот такое предупреждение
35. Нажмите «Дополнительные настройки» и на единственную ссылку, которая появится после этого. Там будет написано «Перейти на Youtube Add-on Personal». Нажмите на эту ссылку. После этого авторизация в Youtube на Kodi будет выполнена. Поздравляю!
Источник: overclockers.ru
YouTube API: плеер с помощью YouTube API, jQuery, CSS
Видео презентации это отличное дополнение к любому продукту. С помощью видео вы можете показать преимущества вашей продукции, при этом не затруднять пользователя чтением длинных параграфов. Но, при добавлении видео, вам необходимо вручную конвертировать его и найти (написать) некоторый flash плеер, который будет отображать презентацию на сайте.
Другой вариант, загрузить видео на видеохостинг, например YouTube. Но вам придется повозиться с настройкой плеера под дизайн вашего сайта.
К счастью, YouTube предлагает решение этой проблемы – это их chromeless player, который позволяет вам разработать и настроить свой плеер. Благодаря YouTube API вы можете быстро и безопасно дополнять ваши страницы прекрасными видео. Также возможно свободно изменять размер плеера, к необходимому.
Суть идеи YouTube API плеера
Сегодня мы будем создавать jQuery плагин, который будет использовать YouTube chromeless player, и создадим наш собственный интерфейс с минимальным набором функционала, который позволит интегрировать плеер в дизайн нашего сайта. Из кнопок управления мы оставим только Play, Pause, Replay, а также кликабельный прогресбар.
Плагин использует YouTube gdata api для определения или изменения параметров видео, и получения информации о нем, такой как, название, описание, теги, скриншоты и т.д., которые вы можете использовать для расширения плагина.
Использование плагина для вставки видео предельно простое:
// Вставка видео в div #pleer $(‘#player’).youTubeEmbed(‘http://www.youtube.com/watch?v=u1zgFlCw8Aw’); // также можно вставлять несколько видео $(‘#player’).youTubeEmbed(‘http://www.youtube.com/watch?v=u1zgFlCw8Aw’); .youTubeEmbed(‘http://www.youtube.com/watch?v=AsdfFdwlzdAw’);
Вы также можете указать ширину встраиваемого видео (высота будет рассчитана автоматически относительно пропорций видео), и отключать прогресбар:
$(‘#player’).youTubeEmbed(< video : ‘http://www.youtube.com/watch?v=u1zgFlCw8Aw’, width : 600, // высота расчитается автоматически progressBar : false // Скрыть прогресбар >);
Сейчас мы напишем плагин поэтапно, шаг за шагом.
Шаг 1 – HTML
Наш плагин зависит от плагина jQuery SWFObject, который встраивает SWF файл на страницу. Ниже, вы можете посмотреть совмещенную разметку, которая генерируется с помощью двух плагинов.
youtube-player.html
Блок .flashContainerDiv, динамически создается для каждого видео на странице. Он заполнен кодом, сгенерированным плагином SWFObject, блоком .controlDiv (который содержит кнопки play/pause) и прогрессбаром.
Как упоминалось выше, вставка плеера в контекст html кода, осуществляется с помощью плагина SWFObject. В зависимости от браузера, он может выводить object элемент, или нестандартный embed элемент для IE. Это снимает груз с наших плеч в плане кроссбраузерности кода и позволяет сконцентрироваться на таких вопросах, как подача запросов к YouTube API и построение контрольной панели плеера.
Шаг 2 – jQuery
Код плагина будет содержаться в файле youTubeEmbed-jquery-1.0.js. Перед его подключением, вам необходимо подключить последнюю версию jQuery библиотеки, а также плагин SWFObject, и наш файл скриптов script.js, который вставляет видео на страницу и позволяет настраивать вид плеера.
Перед тем, как мы начнем углубляться в код плагина, давайте посмотрим на простой ответ YouTube gdata api. Он дает нам много полезной информации о видео, включая продолжительность, контроль доступа и все виде дополнительных данных таких, как название, описание, теги, скриншоты и т.д.
Простой JSON ответ
< «id»: «u1zgFlCw8Aw», «uploaded»: «2008-03-05T01:22:17.000Z», «updated»: «2010-07-23T01:02:42.000Z», «uploader»: «GoogleDevelopers», «category»: «People», «title»: «The YouTube API: Upload, Player APIs and more!», «description»: «Listen to the YouTube APIs and Tools team talk about. «, «tags»: [«youtube», «launch», «api», «engineering»], «thumbnail»: < «sqDefault»: «http://i.ytimg.com/vi/u1zgFlCw8Aw/default.jpg», «hqDefault»: «http://i.ytimg.com/vi/u1zgFlCw8Aw/hqdefault.jpg» >, «player»: < «default»: «http://www.youtube.com/watch?v=u1zgFlCw8Aw», «mobile»: «http://m.youtube.com/details?v=u1zgFlCw8Aw» >, «content»: < «1»: «rtsp://v4.cache5.c.youtube.com/CiILE..», «5»: «http://www.youtube.com/v/u1zgFlCw8Aw?f..», «6»: «rtsp://v3.cache4.c.youtube.com/CiILENy73..» >, «duration»: 259, «location»: «san bruno, ca», «rating»: 4.3, «likeCount»: «119», «ratingCount»: 144, «viewCount»: 251024, «favoriteCount»: 164, «commentCount»: 118, «accessControl»: < «syndicate»: «allowed», «commentVote»: «allowed», «rate»: «allowed», «list»: «allowed», «comment»: «allowed», «embed»: «allowed», «videoRespond»: «allowed» >>
Все поля ответа, это объекты, свойства который, доступны в виде data.fieldname. Вы можете расширять функциональность плагина самостоятельно, для возможности отображения названия, ссылки на видео в youtube, или вывода рейтинга видео. Одним словом, все что вам позволит фантазия.
Теперь, рассмотрим исключительно код плагина.
youTubeEmbed-jquery-1.0.js – Часть 1
(function($) < $.fn.youTubeEmbed = function(settings)< // Настройки могут быть URL строкой, или объектом if(typeof settings == ‘string’)< settings = > // Переменные по умолчанию var def = < width : 640, progressBar : true >; settings = $.extend(def,settings); var elements = < originalDIV : this, // this плагина container : null, // блок контейнера control : null, // контрольные кнопки плей, пауза player : null, // флеш плеер progress : null, // Прогресбар elapsed : null // голубая заливка прогресбара >; try < settings.videoID = settings.video.match(/v=(w+)/)[1]; // safeID это сокращенная версия videoid settings.safeID = settings.videoID.replace(/[^a-z0-9]/ig,»); >catch (e) < // Если url не корректный return elements.originalDIV; >// Получение данных о видео из YouTube API var youtubeAPI = ‘http://gdata.youtube.com/feeds/api/videos?v=2 $.get(youtubeAPI,,function(response) < var data = response.data; if(!data.totalItems || data.items[0].accessControl.embed!=»allowed»)< // Если видео не найдено, вставка не возможна return elements.originalDIV; >// data содержит API информацию о видео: data = data.items[0]; settings.ratio = 3/4; if(data.aspectRatio == «widescreen») < settings.ratio = 9/16; >settings.height = Math.round(settings.width*settings.ratio);
Начинаем с определения нашего скрипта, как плагина, для этого мы добавляем объект $.fn в начале функции. Для простоты чтения и обработки кода, я вынес все элементы страницы, такие как блоки контрольной панели и прогресбара в отдельную структуру elements.
После извлечения id видео (уникальная последовательность из 11 символов, в коде после параметра ?v=), мы отправляем JSONP запрос к YouTube gdata API. В зависимости от доступности видеофайла, а также от разрешения на его вставку, мы продолжаем вычисляя пропорции видео. Высота видео вычисляется используя пропорцию и размер ширины.
youTubeEmbed-jquery-1.0.js – Часть 2
// создание контейнера внутри div блока, который будет содержать вставочный код объекта видео elements.container = $(»,>).appendTo(elements.originalDIV); // Вставка YouTube chromeless player // и загрузка видео внутрь плеера elements.container.flash( < swf : ‘http://www.youtube.com/apiplayer?enablejsapi=1 «video_id» : settings.videoID, «playerapiid» : settings.safeID >>); elements.player = elements.container.flash().get(0); // Создание блока контрольных элементов elements.control = $(»,) .appendTo(elements.container); // Если пользователь захотел увидеть прогресбар if(settings.progressBar)< elements.progress = $(»,) .appendTo(elements.container); elements.elapsed = $(»,) .appendTo(elements.progress); elements.progress.click(function(e)< // При нажатии на прогресбар, прокручиваем видео var ratio = (e.pageX-elements.progress.offset().left)/elements.progress.outerWidth(); elements.elapsed.width(ratio*100+’%’); elements.player.seekTo(Math.round(data.duration*ratio), true); return false; >); >
Во второй части кода, мы используем плагин SWFObject для генерации кода вставки плеера youtube chromeless. Следует заметить, что id видео передается как переменная flash и плеер может загружать видео напрямую. Переменная safeID ( это JavaScript версия переменной videoid ), создается из id, генерируется. С помощью этого, далее мы сможем иметь доступ к DOM элементу с помощью document.getElementById(‘video_’+settings.safeID), и получать доступ к функциям, которые контролируют работу youtube плеера (play, pauseи т.д.).
youTubeEmbed-jquery-1.0.js – Часть 3
var initialized = false; // Создание глобальной калбек функции // (необходимо для связи плеера с YouTube API): window[‘eventListener_’+settings.safeID] = function(status)< var interval; if(status==-1) // видео загружено < if(!initialized) < // Ожидание клика: elements.control.click(function()< if(!elements.container.hasClass(‘playing’))< // Если видео не запущено, запускаем elements.control.removeClass(‘play replay’).addClass(‘pause’); elements.container.addClass(‘playing’); elements.player.playVideo(); if(settings.progressBar)< interval = window.setInterval(function()< elements.elapsed.width( ((elements.player.getCurrentTime()/data.duration)*100)+’%’ ); >,1000); > > else < // Если видео проигрывается — пауза elements.control.removeClass(‘pause’).addClass(‘play’); elements.container.removeClass(‘playing’); elements.player.pauseVideo(); if(settings.progressBar)< window.clearInterval(interval); >> >); initialized = true; > else < // Если пользователь кликнет по // YouTube логотипу, перенаправим его на сайт youtube.com if(elements.container.hasClass(‘playing’)) < elements.control.click(); >> >
Далее, для доступа к контрольным элементам плеера, мы должны знать, когда и какие события запущены (проигрывание, стоп, пауза и т.д.). Это означает, что нам необходимо передать callback функцию, которая будет постоянно работать, сообщая какие события происходят.
К сожалению, flash может запускать функции, только определенные в глобальных параметрах и не может видеть, какие функции написаны внутри плагина. Хотя, с помощью создания функций с уникальными именами (с помощью safeID) и естественно добавляя их в окно объекта мы можем реализовать эту связь с flash. Если мы не будем пользоваться этой хитростью, плагин не будет работать.
youTubeEmbed-jquery-1.0.js – Часть 4
if(status==0) < // Видео закончилось elements.control.removeClass(‘pause’).addClass(‘replay’); elements.container.removeClass(‘playing’); >> // Глобальная функция вызывается при загрузке плеера if(!window.onYouTubePlayerReady) < window.onYouTubePlayerReady = function(playerID)< document.getElementById(‘video_’+playerID).addEventListener(‘onStateChange’,’eventListener_’+playerID); >> >,’jsonp’); return elements.originalDIV; > >)(jQuery);
Функцию, которая распознает события, мы создали в предыдущей секции кода, теперь прикрепим ее к плееру с помощью метода addEventListener. Она вызывается постоянно в случае существования stateChange (начало проигрыша, пауза, конец и т.д.). В функцию передается цифровой код, которые соответствует событию.
Теперь посмотрим, как использовать наш плагин.
script.js
$(document).ready(function()< $(‘#player’).youTubeEmbed(‘http://www.youtube.com/watch?v=u1zgFlCw8Aw’); /* //Как вариант можно передать настройки объектом $(‘#player’).youTubeEmbed(< video : ‘http://www.youtube.com/watch?v=u1zgFlCw8Aw’, width : 600, // высота высчитывается автоматически progressBar : false // Скрыть прогрессбар >); */ >);
Вам просто необходимо вызвать функцию youTubeEmbed() и передать конфигурационные параметры. Если передается строка, это должна быть ссылка на youtube видео. Если вы передаете объект, убедитесь, что свойство video содержит корректный URL.
Шаг 3 – CSS
На конец, мы добавим несколько CSS стилей к плееру. Они немножко изменят дизайн контрольных элементов плеера и определят их расположение в окне плеера.
youTubeEmbed-jquery-1.0.css
.flashContainer < /* центрируем контрольную панель */ position:relative; overflow:hidden; >.progressBar < display:none; position:absolute; width:auto; height:8px; left:20px; right:105px; bottom:20px; background-color:#141414; overflow:hidden; cursor:pointer; /* A light CSS3 bottom highlight */ -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3); -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3); box-shadow:0 1px 0 rgba(255, 255, 255, 0.3); >.progressBar .elapsed < position:absolute; width:0; height:100%; background-color:#1fa2f6; border-right:1px solid #49AFF0; >.controlDiv < /* Centering the control div */ position:absolute; width:120px; height:120px; cursor:pointer; top:50%; left:50%; margin:-60px 0 0 -60px; >.controlDiv.play < background:url(‘img/play.png’) no-repeat center center; >.controlDiv.replay < background:url(‘img/replay.png’) no-repeat center center; >.controlDiv.pause < background:url(‘img/pause.png’) no-repeat -99999px; >.flashContainer:hover .controlDiv.pause < background-position:center center; >/* Показываем только прогрессбар при воспроизведении */ .flashContainer.playing:hover .progressBar
Для изменения вида плеера, вам необходимо изменить значения цветов. Также вы можете создать собственные pngфайлы (play/pause). На мой взгляд, это намного проще, нежели изменять вид стандартного плеера youtube.
На этом создание простого YouTube плеера завершено!
Вам понравилась эта статья? Оставьте свои мысли в комментариях ниже!
Источник: sitear.ru