YouTube API плеер с помощью YouTube API, jQuery, CSS


Содержание

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 534755810e934e6a • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Образцы API Youtube Player

0 kartik [2014-03-14 08:35:00]

Я пробовал следующий код из образцов, представленных на developers.google.com/*

Код работает отлично, когда у меня нет ничего другого на моей веб-странице, но когда я пытаюсь объединить его с моим проектом, он, похоже, не работает.

Я предполагаю, что проблема связана со следующими строками:

Может ли кто-нибудь сказать мне, что делают эти две строки, особенно часть [0]?

Мой код почти такой же, за исключением того, что вместо тега скрипта у меня есть код внутри функции, который принимает аргумент для videoId.

EDIT: мой код выглядит следующим образом:

javascript jquery youtube-api

1 ответ

0 Решение jlmcdonald [2014-03-14 08:44:00]

Идея примера кода заключается в том, что он намного более согласован, когда вы загружаете код библиотеки iFrame YouTube после того, как остальная страница загрузилась; поэтому пример кода демонстрирует, что вы помещаете строку в нижней части страницы, и внутри нее вы пересекаете DOM, находите место, где вы можете вставить другой тег, и делайте это динамически ([0] просто говорит «первый запись в массив всех элементов имени в документе).

Логика здесь заключается в том, что когда библиотека iFrame загружается, она будет вызывать функцию onYouTubeIframeAPIReady . Но так как библиотека загружается асинхронно, лучше всего загрузить ее таким образом, чтобы гарантировать, что что-либо еще, что может зависеть от ваших API-интерфейсов (например, элемент в DOM, к которому вы привязываетесь, например).

Также обратите внимание, что поскольку загруженная библиотека всегда вызывает функцию onYouTubeIframeAPIReady , она ДОЛЖНА быть определена вне любой другой функции. В противном случае это невозможно. Это может быть причиной того, что вложение этого кода внутри вашего кода не работает.

Не стесняйтесь публиковать некоторые из ваших объединенных кодов для получения более подробной справки.

Настройка плеера YouTube

Список параметров для настройки функций плеера YouTube, полное описание в документации на developers.google.com.

Панель управления

controls=0 – скрывает панель управления.

controls=1 – элементы управления отображаются в проигрывателе (по умолчанию).

controls=2 – работает так же как controls=1 , но обеспечивает увеличение производительности.


Кнопка полноэкранного режима

fs=0 – скрывает кнопку «Во весь экран».

Скрыть логотип YouTube

modestbranding=1 – скрывает логотип YouTube.

modestbranding=1 modestbranding=0

Цвет прогресс-бара

Только два варианта:

color=red – красный цвет (по умолчанию).

color=white – белый цвет прогресс-бара.

Выключить звук

Автовоисприведение

autoplay=1 запустит видео сразу после загрузки страницы. Еще понадобится добавить атрибут allow=»autoplay» .

Зацикленное видео

loop=1 включает воспроизведение по кругу, также нужно задать playlist=VIDEO_ID .

Начало и конец видео

start=60 – плеер начнет воспроизведение с 60-й секунды.

end=120 – воспроизведение остановится на 2й минуте.

Отключение клавиш управления

disablekb=1 – отключает управления c клавиатуры. Предусмотрены следующие:

  • Пробел: воспроизведение/пауза
  • Стрелка влево: вернуться на 10% в текущем видео
  • Стрелка вправо: перейти на 10% вперед в текущем видео
  • Стрелка вверх: увеличить громкость
  • Стрелка вниз: уменьшить громкость.

Информация о видео

Плейлист

playlist=VIDEO_ID_2,VIDEO_ID_3,VIDEO_ID_4 – список видео для воспроизведения, показ начнется после основного видео (VIDEO_ID).

Загружаемый контент в плеер

Параметр listType в сочетании с list определяет контент в плеере. VIDEO_ID в URL не указывается.

listType=search&list=xxx – поиск по видео.

listType=user_uploads&list=PLxxxxxxxx – канал YouTube, list определяет id канала.

listType=playlist&list=PLAYLIST_ID – плейлист канала YouTube.


Похожие видео

rel=0 – отключает плашку с рекомендованными видео после просмотра.

rel=1 – включает ее (по умолчанию).

Разное

playsinline=1 – включает воспроизведение видео в полноэкранном режиме на iOS.

cc_load_policy=1 – выводит титры даже в том случае, если пользователь их отключил.

iv_load_policy=3 – аннотации к видео (1 – отображаться, 3 – скрыты).

hl=ru – язык интерфейса проигрывателя в формате ISO 639-1.

origin=1 – включает дополнительные меры безопасности для IFrame API.

IFrame API Youtube своя кнопка запуска плеера

Довольно распространенная задача на landing page — стилизовать Youtube проигрыватель, например, вывести свою большую кнопку или, например, при паузе видео снова показать кнопку проигрывания. В любом случае не зависимо от задачи, в первую очередь стоит обратить внимание на iframe API Youtube.

Сразу рассмотрим пример кода:

При подключении iframe API сразу же вызывается метод onYouTubeIframeAPIReady() в котором мы инициализируем объект плеера и прописываем обработчик события. Также мы добавляем обработчик события нажатия нашей кнопки, которая должна при успехе запустить видео и скрыться. Для отслеживания последнего статуса вводим переменную iStatus. В iframe API Youtube есть несколько статусов:

В нашем примере мы отлавливаем только два состояния: проигрывание и пауза. К основным методам API мы бы отнесли:

Есть много других методов для управления проигрыванием видео и списком проигрывания, но в данном примере они нам не интересны, так как наша задача довольно простая. В итоге получается примерно такой результат:

Тут мы поверх iframe разместили собственный div элемент с кнопкой клики по которой мы и отлавливаем.

Данный пример явно есть куда улучшать и оптимизировать, например, делать не полное перекрытие iframe видео, а выводить по центру только div с кнопкой заданного размера, так же можно оптимизировать и сам код для работы с API Youtube, тут нет совершенства, но наш пример просто наглядно демонстрирует как можно быстро решить задачу.

Использование YouTube Data API для своего WEB-сервиса. Выборка нужных видеозаписей, получение информации.

При создании одного из сайтов использующих видеоролики с видеохостинга YouToube, мне потребовалось использовать API которое предоставляет Google. Это и стало идеей для написания статьи. Данное API позволяет отбирать популярные видео на YouTube, осуществить поиск, отбор по категориям, по диапазону дат и др. По отобранным видео можно получить любую информацию, например кол-во просмотров, лайков, название, описание, время воспроизведения, изображение… Пример сайта работающего с такими данными и как вообще это может выглядеть можно увидеть по ссылке.

Способы работы с данным API есть разные. Если необходимо всего лишь получить данные какого-то видео, то можно обойтись функцией file_get_contents, например:

Можно использовать curl. Ну а если API используется по-полной, то стоит установить специальное расширение, о котором ниже.
Из данного примера видно, что для идентификации отдельного видео, API нужно передать id этого видео ($video_id), который можно увидеть в адресной строке YouToube при просмотре видео. Вторым параметром, который нужен для работы с API это ключ ($api_key). Его нужно предварительно получить. Для этого регистрируемся по ссылке.
После регистрации откроется список где надо найти блок с YouTube Data API v3 и включить использование API.

Ответ получаем в формате json, поэтому нужно сначала декодировать функцией json_decode(). Таким образом мы получаем обычный объект с разными свойствами. Например получим название видео и дату публикации:

Получим определенную статистику по видео:

Как видно из примеров, работать таким образом не очень удобно, т.к. существует большая вложенность массивов и свойств. Кроме того, в примере показано только получение информации по одному видео, а часто нужно отобрать ряд видео по определенным признакам и обработать их.
Для удобства работы с API существует специальное расширение. Устанавливается оно с помощью Composer согласно указаниям по ссылке

Базовое использование API касательно именно работы с YouTube тут.

В зависимости от того какие действия с видео или их данными из YouTube вы хотите выполнять, можно написать свой класс, реализующий нужный функционал. Проект, о котором я писал, был на php-фреймворке Laravel-5, но в качестве ориентира набросаю универсальный класс для работы с расширением.

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

Откроем ссылку https://developers.google.com/youtube/v3/docs/videos.
В таблице «Properties» можно увидеть в перечне элементы типа
snippet, player, contentDetails, statistics, status
В зависимости от того какие данные вы хотите получить в ответе указываем их при выборке. Чаще всего будете включать snippet для получения основных данных по видео.
Например:
тут включены snippet и statistics.
Первый параметр, который передаётся в listVideos называется part и в нём определяется информация, которая будет содержаться в результате. Вы можете указать ключ statistics для получения количества голосов, лайков и так далее. О других ключах, которые можно указать читайте в документации.
Во втором параметре следует указать фильтр. В данном случае я хочу получить список самых популярных видеороликов.

Илон Маск рекомендует:  Что такое код asp usehostname

Пример использования.
Создаем объект для работы.


Попробуем получить данные какого-то отдельного видео по его id.
Результат выполнения — объект Google_Service_YouTube_VideoListResponse

Этот объект содержит массив найденных видео (или только одного заданного) с их данными. Расширение так же предоставляет функционал для доступа к массивам объектов и данным. Например получим массив объектов Google_Service_YouTube_Video из которого уже можно извлекать данные непосредственно:

Для того, чтобы вытащить только нужные вам данные в нужном формате придется написать еще пару функций/методов. Определить их можно в нужном контроллере.
Например, метод формирующий массив данных по каждому отдельному видео:

В данном случае массив будет содержать id видео, заголовок, ссылки на 2 изображения-миниатюры (малого и среднего формата), кол-во просмотров и длительность. Касательно последнего привожу отдельно метод, т.к. API возвращает его значение в специфическом формате.

Таки образом, чтобы получить желаемый массив данных для последующего их вывода пользователю выполняем:

Теперь $videos_date содержит массив с данными каждого(или одного конкретного) видео.
Согласно данной строки кода, вызов осуществляется из того же класса, где эти, вспомогательные, методы определены. Например из контроллера.

Аналогично используем другие функции, например поиск видео по заданной фразе:
результат так же передаем в метод getDataVideo() для формирования массива данных.

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

Еще стоит упомянуть, что многие методы расширения позволяют указать код страны по которой нужно отбирать видео. Таким образом, например, получая видео из категории «Фильмы и анимация» для каждой страны будут отбираться отдельные видео, к примеру, ранее транслируемые их национальными телеканалами. Т.е. контент для пользователей из разных стран будет отличаться. Эту возможность стоит использовать. В своем проекте я сделал автоматическое определение страны посетителя сайта на основе его IP используя php расширение geoip2, о котором я писал тут: http://klisl.com/GeoIP.html

Что дает нам использование расширения google/apiclient. Прежде всего удобство использования и взаимодействие с API с помощью ООП. GET запрос:
https://www.googleapis.com/youtube/v3/videos
соответствует вызову:
$this->youtube->videos

Кроме того вам не нужно декодировать JSON формат вручную и удобно обращаться к нужным свойствам объекта.

Для непосредственного воспроизведения видео на странице сайта можно использовать как обычный iframe настроив нужным образом его параметры (панель инструментов, автовоспроизведение, вывод инфо о видео…):Так и использовать API Iframe которое использует JavaScript для более тонкой настройки параметров. Подробнее об этом тут.

YouTube API: плеер с помощью YouTube API, jQuery, CSS

jQuery plugin to insert a YouTube player on the page

YouTube API to load videos

Returns video data for display

Adds hash to URL for direct linking of videos

Builds select dropdown of videos in array and sanatises (requires https://github.com/jaubourg/jquery-jsonp)

controls to be added shortly

Put the following in your footer (Don’t place within $(document).ready)

Load videos manually

If you wish to build your own list of videos from the array, you can access the loadVideo() function as such:

Параметры проигрывателя

Общие сведения

Из этой статьи вы узнаете, как встроить проигрыватель YouTube в приложение и какие параметры проигрывателя будут вам доступны.

Проигрыватель можно настроить с помощью различных параметров, которые добавляются в IFrame. Например, параметр autoplay используется, чтобы включить автоматическое воспроизведение видео, loop – для воспроизведения по кругу, а enablejsapi – чтобы включить JavaScript API.

Ниже описаны все параметры, которые поддерживаются во встроенных проигрывателях YouTube .

Примечание: Окно просмотра встроенного проигрывателя должно быть не меньше 200 x 200 пикселей. Если в проигрывателе отображаются элементы управления, окно должно быть достаточно большим, чтобы полностью отобразить элементы управления, не сжимая окно просмотра меньше минимального размера. Минимальный размер окна просмотра для проигрывателей формата 16:9 составляет 480 х 270 пикселей.

Как встроить проигрыватель YouTube


Далее мы расскажем о том, как встроить проигрыватель с видео, а из последующего раздела вы узнаете, как загрузить в проигрыватель другой контент, например плейлисты и результаты поиска.

Встраивание IFrame с помощью тегов

Определите в приложении тег , где URL src будет указывать контент, загружаемый проигрывателем, а также другие параметры. Параметры height и width тега задают размеры проигрывателя.

Создавая элементы самостоятельно – без помощи IFrame Player API, – вы можете добавить параметры проигрывателя непосредственно в конец URL:

Тег ниже загружает проигрыватель размером 640×360 пикселей, который воспроизводит видео YouTube M7lc1UVf-VE . Так как в URL параметр autoplay имеет значение 1 , воспроизведение видео начинается автоматически после загрузки проигрывателя.

Встраивание IFrame с помощью IFrame Player API

Дождитесь загрузки кода JavaScript Player API, а затем следуйте инструкциям по использованию IFrame Player API. Настройки задаются вторым параметром в конструкторе проигрывателя (за них отвечает свойство playerVars ).

Ниже приведен пример того, как при помощи HTML и JavaScript вставить проигрыватель YouTube в элемент страницы со значением id для параметра ytplayer . Функция onYouTubePlayerAPIReady() вызывается автоматически при загрузке кода IFrame Player API. Этот код не определяет ни параметры проигрывателя, ни другие обработчики событий.

Как выбрать контент для воспроизведения

Встроенный проигрыватель может загружать видеоролики, плейлисты, добавленный пользователем контент или результаты поиска по определенному запросу.

Подробное описание каждого из вариантов приведено ниже:

Как загрузить видео

При встраивании IFrame идентификатор видео на YouTube указывается в URL IFrame src .

Если вы используете YouTube Data API (v3), вы можете создать такие URL программными методами, извлекая идентификаторы из результатов поиска, плейлистов, видеоресурсов или других источников. Получив идентификатор, вставьте его вместо в URL выше VIDEO_ID .

Как загрузить плейлист

Задайте параметру listType значение playlist , а для list установите идентификатор плейлиста, который вы хотите загрузить.

Обратите внимание на то, что в начале идентификатора должны стоять буквы PL , как показано ниже:

Если вы используете YouTube Data API (v3), вы можете создавать эти URL программными методами, извлекая идентификаторы плейлиста из результатов поиска, ресурсов канала или ресурсов действия. Получив идентификатор, вставьте его в URL выше вместо PLAYLIST_ID .

Как загрузить добавленные пользователем видео

Задайте параметру listType значение user_uploads , а list – имя пользователя YouTube, добавленные видео которого вы хотите загрузить.

Как загрузить результаты поиска по определенному запросу

Задайте параметру listType значение search , а для list установите название поискового запроса, который вас интересует.

Параметры

Все перечисленные ниже параметры являются необязательными.

autoplay

controls

disablekb

iv_load_policy

listType


modestbranding

start

Parameters
Значения: 0 или 1 . Значение по умолчанию: 0 . Определяет, начинается ли воспроизведение исходного видео сразу после загрузки проигрывателя.

cc_load_policy

Значения: 1 . Значение по умолчанию определяется настройками пользователя. Значение 1 вызывает отображение закрытых титров по умолчанию даже в том случае, если пользователь отключил титры.

color

Этот параметр определяет цвет, которым выделяется просмотренная часть видео на индикаторе воспроизведения. Допустимые значения: red и white . По умолчанию используется красный цвет. Дополнительные сведения о цвете можно найти в блоге YouTube API.

Примечание. Если для параметра color установлено значение white , параметр modestbranding отключается.

Значения: 0 , 1 или 2 . Значение по умолчанию: 1 . Этот параметр определяет, будут ли отображаться элементы управления проигрывателем. При встраивании IFrame с загрузкой проигрывателя Flash он также определяет, когда элементы управления отображаются в проигрывателе и когда загружается проигрыватель:

  • controls=0 – элементы управления не отображаются в проигрывателе. При встраивании IFrame проигрыватель Flash загружается немедленно.
  • controls=1 – элементы управления отображаются в проигрывателе. При встраивании IFrame элементы управления отображаются немедленно и сразу же загружается проигрыватель Flash.
  • controls=2 – элементы управления отображаются в проигрывателе. При встраивании IFrame отображаются элементы управления, а проигрыватель Flash загружается после того, как пользователь начнет воспроизведение видео.

Примечание. Значения параметра 1 и 2 одинаково работают с точки зрения пользователя, однако значение controls=2 обеспечивает увеличение производительности по сравнению со значением controls=1 при встраивании IFrame. В настоящее время эти два значения все еще имеют некоторые визуальные различия в проигрывателе, такие как размер шрифта заголовка видео. Однако если разница между двумя значениями станет очевидной для пользователя, значение параметра по умолчанию может измениться с 1 на 2 .

Значения: 0 или 1 . Значение по умолчанию: 0 . Значение 1 отключает клавиши управления проигрывателем. Предусмотрены следующие клавиши управления.

  • Пробел: воспроизведение/пауза
  • Стрелка влево: вернуться на 10% в текущем видео
  • Стрелка вправо: перейти на 10% вперед в текущем видео
  • Стрелка вверх: увеличить громкость
  • Стрелка вниз: уменьшить громкость

enablejsapi

Значения: 0 или 1 . Значение по умолчанию: 0 . Значение 1 включает API Javascript. Дополнительные сведения об API Javascript и его использовании см. в документации по API JavaScript.
Значение: положительное целое число. Этот параметр определяет время, измеряемое в секундах от начала видео, когда проигрыватель должен остановить воспроизведение видео. Обратите внимание на то, что время измеряется с начала видео, а не со значения параметра start или startSeconds , который используется в YouTube Player API для загрузки видео или его добавления в очередь воспроизведения.
Значения: 0 или 1 . Значение по умолчанию 1 отображает кнопку полноэкранного режима. Значение 0 скрывает кнопку полноэкранного режима. Определяет язык интерфейса проигрывателя. Для этого параметра используется двухбуквенный код ISO 639-1, хотя такие коды языков, как теги IETF (BCP 47), также могут обрабатываться корректно.

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

Значения: 1 или 3 . Значение по умолчанию: 1 . При значении 1 аннотации видео по умолчанию будут отображаться, а при значении 3 – по умолчанию будут скрыты.
Параметр list в сочетании с параметром listType определяет загружаемый в проигрыватель контент.

  • Если параметр listType имеет значение search , то значение параметра list определяет поисковый запрос.
  • Если параметр listType имеет значение user_uploads , то значение параметра list определяет канал YouTube, из которого будут загружаться видео.
  • Если параметр listType имеет значение playlist , то значение параметра list определяет идентификатор плейлиста YouTube. В начале идентификатора плейлиста должны стоять буквы PL , как показано ниже.

Примечание. Если вы задаете значения параметров list и listType , в URL для встраивания IFrame не нужно указывать идентификатор видео.

Параметр listType в сочетании с параметром list определяет загружаемый в проигрыватель контент. Допустимые значения: playlist , search и user_uploads .

Если вы задаете значения параметров list и listType , в URL для встраивания IFrame не нужно указывать идентификатор видео.

Значения: 0 или 1 . Значение по умолчанию: 0 . Если значение равно 1 , то одиночный проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле. Проигрыватель плейлистов (или пользовательский проигрыватель) воспроизводит по кругу содержимое плейлиста.

Примечание. Этот параметр имеет ограниченную поддержку в проигрывателе AS3 и при встраивании IFrame для загрузки проигрывателя AS3 или HTML5. В настоящее время параметр loop работает только в проигрывателе AS3, если он используется в сочетании с параметром playlist . Чтобы закольцевать одно видео, установите для параметра loop значение 1 , а для параметра playlist укажите тот же идентификатор видео, что и в URL Player API:

Этот параметр позволяет использовать проигрыватель YouTube, в котором не отображается логотип YouTube. Установите значение 1 , чтобы логотип YouTube не отображался на панели управления. Небольшая текстовая метка YouTube будет отображаться в правом верхнем углу при наведении курсора на проигрыватель во время паузы

origin

Этот параметр обеспечивает дополнительные меры безопасности для IFrame API и поддерживается только при встраивании IFrame. Если вы используете IFrame API, т. е. устанавливаете для параметра enablejsapi значение 1 , обязательно укажите свой домен как значение параметра origin .

playlist

Значение представляет собой разделенный запятыми список идентификаторов видео для воспроизведения. Если вы указываете значение, сначала воспроизводится видео, указанное как VIDEO_ID в URL, а затем видео, указанные в параметре playlist .

playsinline

Этот параметр определяет воспроизведение видео на странице или в полноэкранном режиме в проигрывателе HTML5 для iOS. Допустимые значения:
  • 0 : воспроизведение в полноэкранном режиме. В настоящее время это значение по умолчанию, впоследствии оно может быть изменено.
  • 1 : воспроизведение на странице для параметра UIWebViews , созданного с помощью свойства allowsInlineMediaPlayback со значением TRUE .
Значения: 0 или 1 . Значение по умолчанию: 1 . Этот параметр определяет, будут ли воспроизводиться похожие видео после завершения показа исходного видео.

showinfo

Значения: 0 или 1 . Значение по умолчанию: 1 . При значении 0 проигрыватель перед началом воспроизведения не выводит информацию о видео, такую как название и автор видео.

Если вы устанавливаете значение 1 , после загрузки плейлиста в проигрывателе отображаются значки всех видео в списке. Эта функция поддерживается только в проигрывателе AS3, который позволяет загружать плейлисты.

Значение: положительное целое число. Если этот параметр определен, то проигрыватель начинает воспроизведение видео с указанной секунды. Обратите внимание, что, как и для функции seekTo , проигрыватель начинает воспроизведение с ключевого кадра, ближайшего к указанному значению. Это означает, что в некоторых случаях воспроизведение начнется в момент, предшествующий заданному времени (обычно не более чем на 2 секунды).

История изменений

October 14, 2014

The HTML5 player now supports the cc_load_policy , disablekb , end , fs , list , and listType parameters. The parameter descriptions have been updated accordingly.

July 18, 2014

The new hl parameter can be used to set the player’s interface language. The interface language is used for tooltips in the player and also affects the default caption track. The selected caption track may also depend on the availability of caption tracks and user’s individual language preferences.

The parameter’s value is an ISO 639-1 two-letter language code, though other language input codes, such as IETF language tags (BCP 47) may also be handled properly.

The definition of the playsinline parameter, which only affects HTML5 players on iOS, has been modified slightly. The definition now notes that setting the parameter value to 1 causes inline playback only for UIWebViews created with the allowsInlineMediaPlayback property set to TRUE .

January 28, 2014

The playsinline parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Setting the value to 1 causes inline playback.

The Selecting content to play section has been updated to explain how to find YouTube video IDs and playlist IDs using the YouTube Data API (v3) rather than the older API version.

The controls parameter’s definition has been updated to reflect the fact that the parameter value only affects the time that the Flash player actually loads in IFrame embeds. In addition, for IFrame embeds, the parameter value also determines when the controls display in the player. If you set the parameter’s value to 2 , then the controls display and the Flash player loads after the user initiates the video playback.

May 10, 2013

This update contains the following changes:


YouTube no longer identifies experimental API features and services. Instead, we now provide a list of YouTube APIs that are subject to the deprecation policy.

July 20, 2012

This update contains the following changes:

The definition of the controls parameter has been updated to reflect support for a parameter value of 2 and to explain that, for AS3 players, the parameter value determines the time when the Flash player actually loads. If the controls parameter is set to 0 or 1 , the Flash player loads immediately. If the parameter value is 2 , the Flash player does not load until the video playback is initiated.

June 5, 2012

This update contains the following changes:

The HTML5 player now supports the color , modestbranding , and rel parameters, and the definitions for these parameters have been updated accordingly.

The definition of the showinfo parameter has been updated to explain how that if the player is loading a playlist, and you explicitly set the parameter value to 1 , then, upon loading, the player will also display thumbnail images for the videos in the playlist. Note that this functionality is only supported for the AS3 player since that is the only player that can load a playlist.

May 4, 2012

This update contains the following changes:

The showinfo parameter’s definition has been updated to reflect the fact that the HTML5 player supports this parameter.

May 3, 2012

This update contains the following changes:

The new end parameter specifies the time, measured in seconds from the start of the video, when the player should stop playing a video. Note that the time when playback is stopped is measured from the beginning of the video and not from the value of either the start player parameter or the startSeconds parameter, which is used in YouTube Player API functions for loading or queueing a video.

March 29, 2012

This update contains the following changes:

The new Embedding a YouTube player section explains different ways to embed a YouTube player in your application. This section covers manual IFrame embeds, IFrame embeds that use the IFrame Player API, and AS3 and AS2 object embeds. This section incorporates information from the old Example usage section, which has been removed.

The new Selecting content to play section explains how to configure the player to load a video, a playlist, search results for a specified query, or uploaded videos for a specified user.

The new list and listType parameters let you specify the content that the player should load. You can specify a playlist, a search query, or a particular user’s uploaded videos.

The definitions of the fs and rel parameters have been updated to more clearly explain the default parameter values for the AS3 player.

The border , color1 , egm , hd , and showsearch parameters, which are all only supported for the deprecated AS2 Player API, have been moved to a new section named deprecated parameters only used in the AS2 Player API.

The document no longer provides a way to filter the parameter list to only display parameters supported in either the AS3, AS2, or HTML5 player. Instead, each parameter definition has been updated to identify the players that support that parameter.

August 11, 2011

This update contains the following changes:

The new theme and color parameters let you customize the appearance of the embedded player’s player controls. See the YouTube API blog for more information.

June 8, 2011

This update contains the following changes:

The new modestbranding parameter lets you use a YouTube player that does not show a YouTube logo. As of this release, the parameter was only supported for the AS3 embedded player and for IFrame embeds that loaded the AS3 player. As of June 5, 2012, the HTML5 player also supported this parameter.

February 14, 2011


This update contains the following changes:

The documentation has been updated to note that the AS2 Player API has been deprecated. The deprecation of the AS2 Player API was actually announced on October 14, 2009.

February 3, 2011

This update contains the following changes:

The documentation has been updated to identify parameters supported in the HTML5 (IFrame) embedded player.

The document now displays all of the parameters supported in any of YouTube’s embedded players (HTML5, AS3, AS2).

The following parameters are supported in the AS2 player but have been deprecated for the newer AS3 and HTML5 players: border , color1 , color2 , egm , hd , and showsearch .

In addition, the loop parameter has limited support in the AS3 player and in IFrame embeds, which could load either an AS3 or HTML player. Currently, the loop parameter only works in the AS3 player when used in conjunction with the playlist parameter. To loop a single video, set the loop parameter to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL:

Similarly, the controls and playlist parameters are supported in the AS3 and HTML5 players but are not and will not be supported in the AS2 player.

As noted above, IFrame embeds can load either an AS3 or HTML5 player. Though some parameters are not supported in both players, an IFrame embed that loads the AS3 player will support all parameters that work with that player and ignore all other parameters. Similarly, an IFrame embed that loads the HTML5 player will support all parameters that work with that player while ignoring all other parameters.

The parameter list has been updated to include the autohide parameter, which indicates whether the player’s video controls will automatically hide after a video begins playing.

The parameter list has been updated to include the controls parameter, which indicates whether the player’s video controls will display at all. (Player controls do display by default.)

The parameter list has been updated to include the playlist parameter, which specifies a comma-separated list of video IDs to play.

The definition of the fs has been updated to note that the fullscreen option will not work if you load the YouTube player into another SWF.

The example at the end of the document has been updated to use the embedded AS3 player instead of the embedded AS2 player. The parameters used in the example have also been updated to only include parameters that the AS3 player supports.

In addition, the instructions for constructing the URLs that contain player parameters have been updated to reflect the URL formats used by the AS3 and AS2 embedded and chromeless players as well as by the HTML5 player.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Запустить видео youtube по клику — jQuery

Часто ли вам приходится работать с видео из популярного видео хостинга — youtube? Если приходится — вы знаете, что этот сервис позволяет без труда вставить видео к себе на сайт. Причем у них достаточно хорошее API, которое позволяет сделать неплохие настройки плеера. Но недавно столкнулся с нетривиальной задачей — как запустить видео по клику на произвольную кнопку или элемент? Ведь передать клик фрейму с помощью триггера не получится. Решение было найдено!

Все оказалось не так уж и сложно. Достаточно написать простенький скрипт на jQuery и все будет работать. Но давайте разберемся по порядку. Рассмотрим живой пример. Возьмем произвольное видео из ТОП-а на youtube и вставим его на сайт. Мне попалось вот это. Заходим на страницу видео, внизу нажимаем поделиться и копируем полученный html-код:

Теперь внимание! Нам нужно в конце ссылки добавить параметры ?rel=0&showinfo=0 — чтобы не было инфы перед запуском и чтобы не воспроизводились другие после завершения. Если вы не хотите этого добавлять, то добавьте хотя бы знак вопроса в конце, потому что иначе работать оно не будет. Добавим также для идентификации нашего плеера. Полученный код:

Теперь создадим самую простую кнопку, по нажатию на которую будем стартовать наше видео:

Добавим чуть стилей:

И теперь самое важное — сам скрипт, который будет делать всю работу:

Работает он следующим образом: находит плеер по >

Автоматический поиск и вставка на сайте роликов из Youtube с помощью Youtube Data API v3 и jQuery для Yii и Yii2

Для тех, кто хочет, чтобы нужные ролики автоматически искались на youtube по ключевой фразе и внедрялись на страницу сайта.

  • Главная

  • Блог
  • Автоматический поиск и вставка на сайте роликов.

В версии 3 API от Youtube были изменения, из-за чего работа с ним поначалу вызывает сложности. Рассмотрим как реализовать вставку на страницы песенного сайта нескольких роликов, выбираемых из Youtube. Этот способ мы внедрили в loco.ru для проекта learnsongs.ru. С прошлой версией API мы подключали flash-плеер и это не работало на iphone. Сейчас плеер вставляется через iframe и ролики прекрасно играются и со смартфонов.

В виде добавим код html:

ненумерованный список ul будем заполнять при помощи jQuery. Скрытый input с пишем для задания значения для поиска. Наш js-скрипт будет брать значение из его параметра value и передавать на API youtube для поиска релевантных видео.

Вот содержимое нашего файла script.js, в котором и происходит вся магия. Чтобы это заработало, не забудьте подключить его — либо в шаблоне, либо в виде, либо в контроллере (смотря как это у вас в проекте организовано). Также не забудьте подключить jquery, в Yii и Yii2 он включен, но проверьте что это так.

Обратите внимание на параметр key. Его нужно создать в API — https://console.developers.google.com, добавив проект и подтвердив права на сайт. Без этого не получится работать с API. Соответственно понадобится аккаунт в Google.

Помогло:

2) замечательный видеоурок от Brad Traversy по внедрению показа роликов из определённого канала на сайте. Пошаговое внедрение роликов на сайт. Тут немного по-другому устроен скрипт — он ищет конкретный канал и выводит видео из него.

Использование YouTube Data API для своего WEB-сервиса. Выборка нужных видеозаписей, получение информации.

При создании одного из сайтов использующих видеоролики с видеохостинга YouToube, мне потребовалось использовать API которое предоставляет Google. Это и стало идеей для написания статьи. Данное API позволяет отбирать популярные видео на YouTube, осуществить поиск, отбор по категориям, по диапазону дат и др. По отобранным видео можно получить любую информацию, например кол-во просмотров, лайков, название, описание, время воспроизведения, изображение… Пример сайта работающего с такими данными и как вообще это может выглядеть можно увидеть по ссылке.

Способы работы с данным API есть разные. Если необходимо всего лишь получить данные какого-то видео, то можно обойтись функцией file_get_contents, например:

Можно использовать curl. Ну а если API используется по-полной, то стоит установить специальное расширение, о котором ниже.
Из данного примера видно, что для идентификации отдельного видео, API нужно передать id этого видео ($video_id), который можно увидеть в адресной строке YouToube при просмотре видео. Вторым параметром, который нужен для работы с API это ключ ($api_key). Его нужно предварительно получить. Для этого регистрируемся по ссылке.
После регистрации откроется список где надо найти блок с YouTube Data API v3 и включить использование API.

Ответ получаем в формате json, поэтому нужно сначала декодировать функцией json_decode(). Таким образом мы получаем обычный объект с разными свойствами. Например получим название видео и дату публикации:

Получим определенную статистику по видео:

Как видно из примеров, работать таким образом не очень удобно, т.к. существует большая вложенность массивов и свойств. Кроме того, в примере показано только получение информации по одному видео, а часто нужно отобрать ряд видео по определенным признакам и обработать их.
Для удобства работы с API существует специальное расширение. Устанавливается оно с помощью Composer согласно указаниям по ссылке

Базовое использование API касательно именно работы с YouTube тут.

В зависимости от того какие действия с видео или их данными из YouTube вы хотите выполнять, можно написать свой класс, реализующий нужный функционал. Проект, о котором я писал, был на php-фреймворке Laravel-5, но в качестве ориентира набросаю универсальный класс для работы с расширением.

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

Откроем ссылку https://developers.google.com/youtube/v3/docs/videos.
В таблице «Properties» можно увидеть в перечне элементы типа
snippet, player, contentDetails, statistics, status
В зависимости от того какие данные вы хотите получить в ответе указываем их при выборке. Чаще всего будете включать snippet для получения основных данных по видео.
Например:
тут включены snippet и statistics.
Первый параметр, который передаётся в listVideos называется part и в нём определяется информация, которая будет содержаться в результате. Вы можете указать ключ statistics для получения количества голосов, лайков и так далее. О других ключах, которые можно указать читайте в документации.
Во втором параметре следует указать фильтр. В данном случае я хочу получить список самых популярных видеороликов.

Пример использования.
Создаем объект для работы.

Попробуем получить данные какого-то отдельного видео по его id.
Результат выполнения — объект Google_Service_YouTube_VideoListResponse

Этот объект содержит массив найденных видео (или только одного заданного) с их данными. Расширение так же предоставляет функционал для доступа к массивам объектов и данным. Например получим массив объектов Google_Service_YouTube_Video из которого уже можно извлекать данные непосредственно:

Для того, чтобы вытащить только нужные вам данные в нужном формате придется написать еще пару функций/методов. Определить их можно в нужном контроллере.
Например, метод формирующий массив данных по каждому отдельному видео:

В данном случае массив будет содержать id видео, заголовок, ссылки на 2 изображения-миниатюры (малого и среднего формата), кол-во просмотров и длительность. Касательно последнего привожу отдельно метод, т.к. API возвращает его значение в специфическом формате.

Таки образом, чтобы получить желаемый массив данных для последующего их вывода пользователю выполняем:

Теперь $videos_date содержит массив с данными каждого(или одного конкретного) видео.
Согласно данной строки кода, вызов осуществляется из того же класса, где эти, вспомогательные, методы определены. Например из контроллера.

Аналогично используем другие функции, например поиск видео по заданной фразе:
результат так же передаем в метод getDataVideo() для формирования массива данных.

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

Еще стоит упомянуть, что многие методы расширения позволяют указать код страны по которой нужно отбирать видео. Таким образом, например, получая видео из категории «Фильмы и анимация» для каждой страны будут отбираться отдельные видео, к примеру, ранее транслируемые их национальными телеканалами. Т.е. контент для пользователей из разных стран будет отличаться. Эту возможность стоит использовать. В своем проекте я сделал автоматическое определение страны посетителя сайта на основе его IP используя php расширение geoip2, о котором я писал тут: http://klisl.com/GeoIP.html

Что дает нам использование расширения google/apiclient. Прежде всего удобство использования и взаимодействие с API с помощью ООП. GET запрос:
https://www.googleapis.com/youtube/v3/videos
соответствует вызову:
$this->youtube->videos

Кроме того вам не нужно декодировать JSON формат вручную и удобно обращаться к нужным свойствам объекта.

Для непосредственного воспроизведения видео на странице сайта можно использовать как обычный iframe настроив нужным образом его параметры (панель инструментов, автовоспроизведение, вывод инфо о видео…):Так и использовать API Iframe которое использует JavaScript для более тонкой настройки параметров. Подробнее об этом тут.

Илон Маск рекомендует:  Что такое код java
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL