Обзор
Из этой статьи вы узнаете, как встроить проигрыватель YouTube в приложение и какие параметры проигрывателя будут вам доступны.
Добавляя параметры в URL iframe, вы можете настраивать воспроизведение в своем приложении. Например, вы можете настроить автоматическое воспроизведение видео с помощью параметра autoplay или зациклить его с помощью параметра loop. Вы также можете использовать параметр enablejsapi, чтобы управлять проигрывателем через IFrame Player API.
Ниже описаны все параметры, которые поддерживаются во встроенных проигрывателях YouTube. Для каждого из них указаны соответствующие виды проигрывателей.
Примечание. Размер области просмотра встроенного проигрывателя должен быть не меньше, чем 200 x 200 пикселей. Если в проигрывателе отображаются элементы управления, окно должно быть достаточно большим, чтобы вмещать их без сжатия области просмотра до размера меньше минимального. Минимальный размер области просмотра для проигрывателей формата 16:9 составляет 480 х 270 пикселей.
Как встроить проигрыватель YouTube
Существуют и другие способы встроить проигрыватель YouTube в приложение и настроить его параметры. Далее мы расскажем о том, как встроить проигрыватель с видео, а из последующего раздела вы узнаете, как загрузить в проигрыватель другой контент, например плейлисты и результаты поиска. В этом разделе рассказывается, как настроить проигрыватель для загрузки плейлиста или видео, загруженных пользователем.
Встраивание проигрывателя с помощью тега <iframe>
Определите в приложении тег <iframe>, в котором URL src указывает контент, загружаемый проигрывателем, а также другие параметры проигрывателя, которые вы хотите задать. Параметры height и width тега <iframe> определяют размеры проигрывателя.
Если вы создаете элемент <iframe> самостоятельно (не используя IFrame Player API), то можете добавлять параметры проигрывателя непосредственно в конец URL. URL имеет следующий формат:
https://www.youtube.com/embed/VIDEO_ID
Тег <iframe>, приведенный ниже, загрузит проигрыватель размером 640 x 360 пикселей, в котором будет воспроизводиться видео YouTube M7lc1UVf-VE. Поскольку в URL для параметра autoplay задано значение 1, видео будет воспроизводиться автоматически после загрузки проигрывателя.
<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com" frameborder="0"></iframe>
Как встроить проигрыватель с помощью IFrame Player API
Чтобы вставить видеопроигрыватель на веб-страницу или в приложение после загрузки кода JavaScript, следуйте инструкциям по работе с IFrame Player API. Настройки задаются вторым параметром в конструкторе проигрывателя В этом объекте свойство playerVars определяет параметры проигрывателя.
В приведенном ниже коде HTML и JavaScript показан простой пример, в котором проигрыватель YouTube вставляется в элемент страницы со значением ytplayer атрибута id. Функция onYouTubePlayerAPIReady(), указанная здесь, вызывается автоматически после загрузки кода IFrame Player API. Этот код не определяет ни параметры проигрывателя, ни другие обработчики событий.
<div id="ytplayer"></div>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE'
});
}
</script>
Выберите контент для воспроизведения
Встроенный проигрыватель можно настроить так, чтобы в нем воспроизводилось видео, плейлист или загруженные пользователем видео.
Узнайте подробнее о том, как загружать различные типы контента.
-
Загрузка видео
При встраивании через IFrame идентификатор видео YouTube, которое вы хотите загрузить, указывается в URL
src.https://www.youtube.com/embed/VIDEO_ID
С YouTube Data API (v3) такие URL можно создавать программными методами, которые позволяют извлечь идентификаторы из результатов поиска, плейлистов, видеоресурсов и других источников. Получив идентификатор видео, замените им текст
VIDEO_IDв URL выше, чтобы создать URL проигрывателя. -
Загрузка плейлиста
Задайте для параметра проигрывателя
listTypeзначениеplaylist. Кроме того, задайте для параметра проигрывателяlistидентификатор плейлиста YouTube, который нужно загрузить.https://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID
Обратите внимание на то, что в начале идентификатора должны стоять буквы
PL, как показано ниже:https://www.youtube.com/embed?listType=playlist&list=PLC77007E23FF423C6
С YouTube Data API (v3) эти URL можно создавать программными методами, извлекая идентификаторы плейлиста из результатов поиска, ресурсов канала или ресурсов действия. Замените текст
PLAYLIST_IDв URL выше на идентификатор плейлиста. -
Загрузка видео, добавленных пользователем
Задайте для параметра проигрывателя
listTypeзначениеuser_uploads. Кроме того, задайте для параметра проигрывателяlistимя пользователя YouTube, чьи загруженные видео вы хотите загрузить.https://www.youtube.com/embed?listType=user_uploads&list=USERNAME
Поддерживаемые параметры
Все приведенные ниже параметры являются необязательными.
| Параметры | |
|---|---|
|
Этот параметр определяет, будет ли видео автоматически воспроизводиться при загрузке проигрывателя. Допустимые значения: 0 и 1. Значение по умолчанию: 0.Если вы включите автовоспроизведение, видео будет запускаться без участия пользователя, а сбор и передача данных о воспроизведении будут происходить при загрузке страницы. |
|
Этот параметр определяет, какой язык субтитров будет использоваться по умолчанию. В качестве значения параметра укажите двухбуквенный код языка по стандарту ISO 639-1 или языковой тег по стандарту BCP 47 (например, fr-CA).Если вы используете этот параметр и задаете для параметра cc_load_policy значение 1, то при загрузке проигрывателя будут показываться субтитры на указанном языке. Если вы не зададите параметр cc_load_policy, субтитры не будут показываться по умолчанию, но если пользователь включит их, они будут на указанном языке.
|
|
Если задать для этого параметра значение 1, субтитры будут показываться по умолчанию, даже если пользователь их отключил. Режим работы по умолчанию основан на настройках пользователя.
|
|
Этот параметр определяет, каким цветом будет выделяться просмотренный отрезок на индикаторе воспроизведения. Допустимые значения параметра – red и white. По умолчанию индикатор выполнения видео в проигрывателе имеет красный цвет.
|
|
Этот параметр указывает, показываются ли элементы управления видеопроигрывателем:
|
|
Если задать значение 1, проигрыватель не будет реагировать на нажатия клавиш. Значение по умолчанию – 0 (управление с клавиатуры включено). В настоящее время поддерживаются следующие сочетания клавиш:
|
|
Если задать для этого параметра значение 1, проигрывателем можно будет управлять с помощью вызовов IFrame Player API. Значение по умолчанию – 0. Это означает, что проигрывателем нельзя управлять с помощью API.Подробную информацию об IFrame API и его использовании можно найти в документации. |
|
Этот параметр определяет время в секундах, спустя которое проигрыватель должен остановить воспроизведение. Значение параметра – положительное целое число. Обратите внимание, что время отсчитывается от начала видео, а не от значения параметра проигрывателя start или параметра startSeconds, который используется в функциях YouTube Player API для загрузки видео или добавления его в очередь.
|
|
Если задать для этого параметра значение 0, кнопка полноэкранного режима не будет показываться в проигрывателе. Значение по умолчанию – 1 (кнопка показывается).
|
|
Определяет язык интерфейса проигрывателя. Значение параметра – это двухбуквенный код языка ISO 639-1 или полностью указанный региональный параметр. Например, fr и fr-ca – допустимые значения. Другие коды языков, например теги IETF (BCP 47), также могут обрабатываться корректно.Язык интерфейса используется для подсказок в проигрывателе, а также влияет на выбор дорожки субтитров по умолчанию. Обратите внимание, что YouTube может выбрать для определенного пользователя другой язык субтитров в зависимости от его языковых настроек и доступности дорожек субтитров. |
|
Если задать значение 1, аннотации будут показываться по умолчанию, а если 3 – не будут. Значение по умолчанию: 1.
|
|
Параметр list вместе с параметром listType определяет контент, который будет загружаться в проигрыватель.
list и listType, то в URL встроенного проигрывателя iframe не нужно будет указывать идентификатор видео. |
|
Параметр listType вместе с параметром list определяет контент, который будет загружаться в проигрыватель. Допустимые значения параметра: playlist и user_uploads.Если вы укажете значения параметров list и listType, то в URL встроенного проигрывателя IFrame не нужно будет указывать идентификатор видео.
Примечание. Третье значение параметра, search, устарело и не будет поддерживаться с |
|
Если у вас один видеопроигрыватель, то при значении 1 он будет воспроизводить одно и то же видео снова и снова. Если используется проигрыватель плейлистов (или пользовательский проигрыватель), то после воспроизведения всего плейлиста он начинает воспроизводиться заново с первого видео.Допустимые значения: 0 и 1. Значение по умолчанию – 0.Примечание. Этот параметр не полностью поддерживается во встроенных проигрывателях IFrame. Чтобы зациклить одно видео, задайте для параметра loop значение 1, а для параметра playlist – тот же идентификатор видео, который уже указан в URL Player API:https://www.youtube.com/embed/VIDEO_ID?playlist=VIDEO_ID&loop=1 |
|
Примечание. Этот параметр устарел и не действует. Подробнее… |
|
Этот параметр используется для защиты iFrame API и поддерживается только при встраивании iFrame. Если вы используете IFrame API, то есть задаете для параметра enablejsapi значение 1, то в качестве значения параметра origin всегда указывайте свой домен.
|
|
Этот параметр содержит список идентификаторов видео, разделенных запятыми. Если вы укажете значение, то первым будет воспроизведено видео VIDEO_ID, указанное в пути URL, а затем – видео, указанные в параметре playlist.
|
|
Этот параметр определяет, как воспроизводятся видео на устройствах iOS: в полноэкранном режиме или нет. Допустимые значения:
|
|
Примечание. Этот параметр изменится 25 сентября 2018 г. или позже. До изменения этот параметр указывал, должен ли проигрыватель показывать похожие видео после окончания воспроизведения исходного видео.
rel присвоено значение 0, то в списке похожих видео будут только ролики с того же канала, что и воспроизведенное видео.
|
|
Если этот параметр определен, то воспроизведение видео начнется с указанной секунды. Значение параметра – положительное целое число. Обратите внимание, что, как и в случае с функцией seekTo, проигрыватель будет искать ключевой кадр, наиболее близкий к указанному времени. Это означает, что в некоторых случаях воспроизведение начнется до заданного времени (как правило, отклонение не превышает 2 секунды).
|
|
Этот параметр определяет URL, по которому встроен проигрыватель. Это значение используется в отчетах YouTube Аналитики, когда проигрыватель YouTube встроен в виджет, а виджет – в веб-страницу или приложение. В этом случае параметр origin определяет домен поставщика виджета, но YouTube Аналитика не должна считать его фактическим источником трафика. Вместо этого YouTube Аналитика использует значение параметра widget_referrer, чтобы определить домен, связанный с источником трафика.
|
История изменений
August 15, 2023
Note: This is a deprecation announcement for the
modestbranding parameter.
The modestbranding parameter is deprecated and will
have no effect. To align with YouTube's branding requirements, the player now determines the
appropriate branding treatment based on a combination of factors, including player size, other API
parameters (e.g. controls), and additional signals.
April 27, 2021
The playsinline parameter definition has been updated
slightly to explain that the parameter pertains to both mobile browsers on iOS and iOS
WebViews.
October 15, 2020
The autoplay parameter definition has been updated to
explain that if you enable Autoplay, playback will occur without any user interaction with the
player; playback data collection and sharing will therefore occur upon page load.
October 13, 2020
Note: This is a deprecation announcement for the embedded player
functionality that lets you configure the player to load search results. This announcement affects
the player's list and
listType parameters.
This change will become effective on or after listType parameter value to search will generate a
4xx response code, such as 404 (Not Found) or
410 (Gone).
As an alternative, you can use the YouTube Data API's
search.list method to retrieve search
results and then load selected videos in the player.
In addition to the change described above, the showinfo parameter, which was
deprecated in 2018, has been removed from this document.
August 23, 2018
Note: This is a deprecation announcement for the showinfo parameter. In addition, the behavior for the rel parameter is changing. Titles, channel information, and related videos are an important part of YouTube's core user experience, and these changes help to make the YouTube viewing experience consistent across different platforms.
- The behavior for the
relparameter is changing on or after September 25, 2018. The effect of the change is that you will not be able to disable related videos. However, you will have the option of specifying that the related videos shown in the player should be from the same channel as the video that was just played.
To be more specific:- Prior to the change, if the parameter's value is set to
0, then the player does not show related videos. - After the change, if the
relparameter is set to0, the player will show related videos that are from the same channel as the video that was just played.
- Prior to the change, if the parameter's value is set to
- The
showinfoparameter, which indicates whether the player should display information like the video title and uploader before the video starts playing, is also being deprecated. Following the change, the channel avatar and video title will always display before playback begins, when playback is paused, and when playback ends. The avatar being displayed is new behavior that will be consistent across all embedded players.
These changes will become effective on or after September 25, 2018. After that time, the showinfo parameter will be ignored. The behavior following the changes is consistent with the current default behavior for embedded players with the exception of the channel avatar changes mentioned above.
August 16, 2018
The cc_lang_pref parameter can be used to specify the default language that the player will use to display captions. This parameter can be used in conjunction with the cc_load_policy parameter to automatically show captions in the specified language during playback.
September 15, 2017
The controls parameter's definition has been updated to remove references to the deprecated Flash (AS3) player. The value 2 has been deprecated as it was originally designed to provide a performance improvement for embeds that loaded a Flash player.
June 12, 2017
The new widget_referrer parameter helps to enable more accurate YouTube Analytics reporting when the YouTube player is embedded in a widget, and that widget is then embedded in a web page or application.
November 1, 2016
This document has been updated to remove references to the deprecated Flash (AS3) player as well as to parameters only supported by that player. The YouTube Flash player was deprecated in January 2015.
October 20, 2016
This update contains the following changes:
-
The
disablekbparameter definition has been corrected to note that the default value is0, which means that keyboard controls are enabled. A value of1indicates that keyboard controls should be disabled.The list of keyboard controls that the player supports has also been updated to include the following:
- [f]: Toggle full-screen display
- [j]: Jump back 10 seconds in the current video
- [k]: Play / Pause
- [l]: Jump ahead 10 seconds in the current video
- [m]: Mute or unmute the video
- [0-9]: Jump to a point in the video.
0jumps to the beginning of the video,1jumps to the time 10% into the video,2jumps to the point 20% into the video, and so forth.
In addition, the effect of pressing the [arrow left] or [arrow right] keys has changed. These keys now jump 5 seconds back (arrow left) or ahead (arrow right) in the current video.
August 11, 2016
This update contains the following changes:
-
The YouTube API Services Terms of Service ("the Updated Terms") provides a rich set of updates to the current Terms of Service. In addition to the Updated Terms, which will go into effect as of February 10, 2017, this update includes several supporting documents to help explain the policies that developers must follow.
The full set of new documents is described in the revision history for the Updated Terms. In addition, future changes to the Updated Terms or to those supporting documents will also be explained in that revision history.
December 18, 2015
European Union (EU) laws require that certain disclosures must be given to and consents obtained from end users in the EU. Therefore, for end users in the European Union, you must comply with the EU User Consent Policy. We have added a notice of this requirement in our YouTube API Terms of Service.
August 19, 2015
-
The
autohideparameter has been deprecated for the HTML5 player. In HTML5 players, the video progress bar and player controls display or hide automatically. That behavior corresponds to anautohidesetting of1. -
The
themeparameter has been deprecated for the HTML5 player. HTML5 players now always use the dark theme.
March 9, 2015
-
The document has been updated to reflect the fact that YouTube
<object>embeds, the YouTube Flash Player API and the YouTube JavaScript Player API have all been deprecated as of January 27, 2015. A deprecation warning appears in several sections of this document to help point readers to the IFrame Player API as an alternative. -
The definition of the
autohideparameter has been updated to clarify the meaning of the parameter's values. The default behavior (autohide=2) is that if the player has a 16:9 or 4:3 aspect ratio, the player's video progress bar and player controls display or hide automatically. Otherwise, those controls are visible throughout the video. -
The definition of the
hlparameter has been updated to note that the parameter value could be an ISO 639-1 two-letter language code or a fully specified locale. For example,frandfr-caare both valid parameter values. -
The definition of the
enablejsapiparameter has been reworded to clarify that the parameter enables a player to be controlled via API calls. The API could be either the IFrame Player API or the JavaScript Player API.
October 14, 2014
-
The HTML5 player now supports the
cc_load_policy,disablekb,end,fs,list, andlistTypeparameters. The parameter descriptions have been updated accordingly.
July 18, 2014
-
The new
hlparameter 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
playsinlineparameter, which only affects HTML5 players on iOS, has been modified slightly. The definition now notes that setting the parameter value to1causes inline playback only forUIWebViewscreated with theallowsInlineMediaPlaybackproperty set toTRUE.
January 28, 2014
-
The
playsinlineparameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Setting the value to1causes 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
controlsparameter'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 to2, 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
controlsparameter has been updated to reflect support for a parameter value of2and to explain that, for AS3 players, the parameter value determines the time when the Flash player actually loads. If thecontrolsparameter is set to0or1, the Flash player loads immediately. If the parameter value is2, 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, andrelparameters, and the definitions for these parameters have been updated accordingly. -
The definition of the
showinfoparameter has been updated to explain how that if the player is loading a playlist, and you explicitly set the parameter value to1, 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
showinfoparameter'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
endparameter 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 thestartplayer parameter or thestartSecondsparameter, 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
listandlistTypeparameters 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
fsandrelparameters have been updated to more clearly explain the default parameter values for the AS3 player. -
The
border,color1,egm,hd, andshowsearchparameters, 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
themeandcolorparameters let you customize the appearance of the embedded player's player controls.
June 8, 2011
This update contains the following changes:
-
The new
modestbrandingparameter 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, andshowsearch.In addition, the
loopparameter has limited support in the AS3 player and in IFrame embeds, which could load either an AS3 or HTML player. Currently, theloopparameter only works in the AS3 player when used in conjunction with theplaylistparameter. To loop a single video, set theloopparameter to1and set theplaylistparameter value to the same video ID already specified in the Player API URL:https://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID
Similarly, the
controlsandplaylistparameters 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
autohideparameter, 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
controlsparameter, 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
playlistparameter, which specifies a comma-separated list of video IDs to play. -
The definition of the
fshas 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.