TL;DR
Youtube allows only https pages to stream with embeds/iframes.
Make sure that embeds are allowed by the video owner.
Set a less restrictive referrer policy such as «no-referrer-when-downgrade» in order to allow youtube to know the origin of the request. In django you can do this by adding following line in
settings.py
SECURE_REFERRER_POLICY = "no-referrer-when-downgrade"
Long read:
If you are facing this in django application recently, it could because of the recent change in referrer policy in django 3. Read more here
When you add an iframe for a youtube video (given that the video owner allows embeds), the referrer (the host origin where the video is being played) is sent to youtube, by the scripts inside the iframe (the embed url gets a new page which brings all the required scripts). If the server is setting a referrer policy which prevents the communication about the referrer, youtube rejects the play request and responds with 204 — no content.
Starting from django v3.x, the referrer policy is set to «same-origin» by default which is too restrictive to let youtube know about the origin. In this case, youtube does not allow the video playback and responds with code 204.
This can be resolved by setting a less restrictive referrer policy. You can use «no-referrer-when-downgrade».
In django, you can set this with the following variable in settings.py file.
SECURE_REFERRER_POLICY = "no-referrer-when-downgrade"
The above policy states that referrer will be sent as empty when the access protocol is downgraded, else the origin will be sent as referrer (which is acceptable). Given that, youtube only allows https origins, for this case it means that if the iframe is embedded in a webpage with https, the referrer will be sent properly and should not cause issues while playing youtube videos through such embeds.
Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
API проигрывателя IFrame позволяет встраивать проигрыватель видео YouTube на сайт и управлять использованием JavaScript. В отличие от API Flash и JavaScript, требующих вставки объекта Flash на веб-страницу, API IFrame отправляет содержимое в тег <iframe> страницы сайта. Благодаря этому появляется больше возможностей использования API, так как YouTube может выступать в качестве проигрывателя HTML5 для мобильных устройств, не поддерживающих технологию Flash.
С помощью функций JavaScript API можно добавлять видео в очередь для воспроизведения, воспроизводить, делать паузу и останавливать видеоролики, регулировать громкость проигрывателя и получать информацию о воспроизводимом видео. Также можно добавлять функции прослушивания событий, которые будут выполняться в ответ на определенные события, например изменение состояния проигрывателя или качества воспроизведения видео.
Данное руководство описывает процесс использования API IFrame. В нем определены разные типы событий, которые может отправить API, а также описан процесс написания функций прослушивания событий для ответа на эти события. Кроме того, в нем подробно описаны различные функции JavaScript, вызываемые для управления проигрывателем видео, а также параметры проигрывателя, которые можно использовать для его дальнейшей настройки.
Требования
Конечные пользователи должны использовать браузер с поддержкой функции HTML5 postMessage. Функция postMessage поддерживается большинством современных браузеров, кроме Internet Explorer 7.
Окно просмотра встроенного проигрывателя должно быть не меньше 200 x 200 пикселей. Если в проигрывателе отображаются элементы управления, окно должно быть достаточно большим, чтобы полностью отобразить элементы управления, не сжимая окно просмотра меньше минимального размера. Минимальный размер окна просмотра для проигрывателей формата 16:9 составляет 480 х 270 пикселей.
Кроме того, веб-страница, на которой используется API IFrame, должна реализовывать следующие функции JavaScript:
-
onYouTubeIframeAPIReady– API вызывает эту функцию после того, как JavaScript для API проигрывателя загружен на страницу, что позволяет в дальнейшем использовать API на этой странице. Таким образом, с помощью этой функции можно создавать объекты проигрывателя, которые необходимо отображать при загрузке страницы.
Начало работы
В приведенном ниже примере страницы HTML выполняется создание встроенного проигрывателя, который будет загружать видео, воспроизводить его в течение 6 секунд и останавливать воспроизведение. Подробное описание комментариев в коде HTML приведено в списке после примера.
<!DOCTYPE html>
<html>
<body>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
Ниже представлена подробная информация о примере:
-
В этом разделе тег
<div>указывает место на странице, в котором API IFrame создаст проигрыватель видео. Конструктор объекта проигрывателя, описанный в разделе Загрузка проигрывателя видео, определяет тег<div>по егоid, чтобы убедиться, что API поместит тег<iframe>туда, куда нужно. Точнее, API IFrame заменит тег<div>тегом<iframe>.В качестве альтернативы можно поместить элемент
<iframe>непосредственно на страницу. Этот процесс описан в разделе Загрузка проигрывателя видео. -
Приведенный в данном разделе код загружает код JavaScript API проигрывателя IFrame. Для загрузки кода API в примере используется модификация DOM, чтобы загрузка кода выполнялась асинхронно. (Атрибут
<script>тегаasync, который также позволяет загружать данные асинхронно, поддерживается не всеми современными браузерами. Подробнее об этом рассказано в статье Переполнение стека.) -
Функция
onYouTubeIframeAPIReadyвыполняется сразу после загрузки кода API проигрывателя. В этой части кода определяется глобальная переменнаяplayer, которая относится к встраиваемому проигрывателю, после чего функция создает объект проигрывателя видео. -
Функция
onPlayerReadyвыполняется при активации событияonReady. В этом примере функция обозначает, что проигрыватель должен начать воспроизведение видео после того, как он готов к работе. функция будет выполняться, когда вызывается событие. -
5. API вызовет функцию
onPlayerStateChange, когда изменится состояние проигрывателя (воспроизведение, пауза, остановка и т. д.). Эта функция обозначает, что когда проигрыватель находится в состоянии1(воспроизведение), он должен воспроизводить видео в течение шести секунд, а затем вызвать функциюstopVideoдля остановки видео.
Загрузка проигрывателя видео
После загрузки кода JavaScript API вызывает функцию onYouTubeIframeAPIReady, которая позволяет создать объект YT.Player для вставки проигрывателя видео на страницу. Ниже приведен фрагмент кода HTML, описывающий функцию onYouTubeIframeAPIReady из предыдущего примера:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Конструктор проигрывателя видео определяет следующие параметры:
-
Первый параметр определяет элемент DOM или
idэлемента HTML, в который API вставит тег<iframe>с проигрывателем.API IFrame заменяет указанный элемент элементом
<iframe>с проигрывателем. Если стиль отображения заменяемого элемента отличается от стиля вставляемого элемента<iframe>, расположение элементов страницы может измениться. По умолчанию тег<iframe>отображается как элементinline-block. - Второй параметр – это объект, определяющий параметры проигрывателя. Этот объект имеет следующие свойства:
width(число) – ширина проигрывателя. Значение по умолчанию:640.height(число) – высота проигрывателя. Значение по умолчанию:360.videoId(строка) – идентификатор видео YouTube, указывающий на видео, которое будет загружено проигрывателем.playerVars(объект) – свойства объекта определяют параметры проигрывателя, которые можно использовать для настройки проигрывателя.events(объект) – свойства объекта определяют события, которые активирует API и функции (функции прослушивания событий), которые вызывает API, когда эти события происходят. В данном примере конструктор указывает на то, что функцияonPlayerReadyбудет выполнена при активации событияonReady, а функцияonPlayerStateChange– при активации событияonStateChange.
Как уже упоминалось в разделе Начало работы, вместо создания на странице пустого элемента <div>, который затем код JavaScript API проигрывателя заменит на элемент <iframe>, можно создать тег <iframe> самостоятельно.
<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>
Если вы создадите тег <iframe> самостоятельно, то при создании объекта YT.Player вам не нужно будет указывать значения width и height (они уже будут указаны в качестве атрибутов тега <iframe>), videoId и параметров проигрывателя (они будут указаны в URL-адресе src). В качестве дополнительной меры безопасности необходимо добавить в URL-адрес параметр origin, указав префикс (http:// или https://) и полное доменное имя главной страницы в качестве значения параметра. Добавление параметра origin не является обязательным, но помогает защитить страницу от стороннего вредоносного кода JavaScript и перехвата управления проигрывателем YouTube.
В разделе Примеры приведено несколько дополнительных примеров создания объектов проигрывателя видео.
Эксплуатация
Чтобы вызвать методы API проигрывателя, сначала необходимо получить ссылку на объект проигрывателя, которым вы хотите управлять. Получить ссылку можно, создав объект YT.Player (см. разделы Начало работы и Загрузка проигрывателя видео).
Функции
Функции постановки в очередь
С помощью функций постановки в очередь вы можете загрузить и воспроизвести видео, плейлист или список видеофайлов. Если для вызова этих функций используется описанный ниже синтаксис объектов, вы также можете поставить в очередь или загрузить список результатов поиска или список выгруженных каким-либо пользователем видеофайлов.
Для вызова функций постановки видео в очередь API поддерживает два разных типа синтаксиса.
-
Синтаксис аргументов требует указания аргументов функций в определенной последовательности.
-
Синтаксис объектов позволяет передавать объект как один параметр и определять свойства объекта для аргументов функций, которые необходимо настроить. Кроме того, API может поддерживать дополнительную функциональность, которая не поддерживается синтаксисом аргументов.
Например, функцию loadVideoById можно вызвать одним из следующих способов. Обратите внимание, что синтаксис объектов поддерживает свойство endSeconds, которое не поддерживается синтаксисом аргументов.
-
Синтаксис аргументов
loadVideoById("bHQqvYy5KYo", 5, "large") -
Синтаксис объектов
loadVideoById({'videoId': 'bHQqvYy5KYo', 'startSeconds': 5, 'endSeconds': 60, 'suggestedQuality': 'large'});
Функции постановки в очередь видеофайлов
cueVideoById-
-
Синтаксис аргументов
player.cueVideoById(videoId:String, startSeconds:Number, suggestedQuality:String):Void -
Синтаксис объектов
player.cueVideoById({videoId:String, startSeconds:Number, endSeconds:Number, suggestedQuality:String}):Void
Эта функция служит для загрузки значка определенного видео и подготовки проигрывателя к воспроизведению видеофайла. Проигрывателю не требуется FLV, пока не вызваны функции
playVideo()илиseekTo().- Обязательный параметр
videoIdсодержит идентификатор видео на YouTube для видеофайла, который необходимо воспроизвести. В видеопотоках YouTube Data API этот идентификатор содержится в теге<yt:videoid>. - Необязательный параметр
startSecondsпринимает значение с плавающей точкой или целочисленное значение и задает время, с которого необходимо начать воспроизведение видео при вызове функцииplayVideo(). Если задать значение параметраstartSecondsи затем вызвать функциюseekTo(), проигрыватель начинает воспроизведение с момента времени, указанного в вызове функцииseekTo(). Когда видео находится в очереди и готово к воспроизведению, проигрыватель транслирует событиеvideo cued(5). - Необязательный параметр
endSeconds, поддерживаемый только в синтаксисе объектов, принимает значение с плавающей точкой или целочисленное значение и задает время, с которого необходимо остановить воспроизведение видео при вызове функцииplayVideo(). Если задать параметрendSecondsи затем вызвать функциюseekTo(), значениеendSecondsбудет недействительным. - Необязательный параметр
suggestedQualityопределяет рекомендуемое качество воспроизведения видео. Для получения дополнительной информации о качестве воспроизведения см. определение функцииsetPlaybackQuality.
-
-
loadVideoById -
-
Argument syntax
player.loadVideoById(videoId:String, startSeconds:Number, suggestedQuality:String):Void -
Object syntax
player.loadVideoById({videoId:String, startSeconds:Number, endSeconds:Number, suggestedQuality:String}):Void
Эта функция служит для загрузки и воспроизведения указанного видео.
- Обязательный параметр
videoIdсодержит идентификатор видео на YouTube для видеофайла, который необходимо воспроизвести. В видеопотоках YouTube Data API этот идентификатор содержится в теге<yt:videoid>. - Необязательный параметр
startSecondsпринимает значение с плавающей точкой или целочисленное значение. Если задать значение параметра, воспроизведение видео начнется с ключевого кадра, ближайшего к указанному времени. - Необязательный параметр
endSecondsпринимает значение с плавающей точкой или целочисленное значение. Если задать значение параметра, воспроизведение видео будет остановлено в указанное время. - Необязательный параметр
suggestedQualityопределяет рекомендуемое качество воспроизведения видео. Для получения дополнительной информации о качестве воспроизведения см. определение функцииsetPlaybackQuality.
-
-
cueVideoByUrl -
-
Argument syntax
player.cueVideoByUrl(mediaContentUrl:String, startSeconds:Number, suggestedQuality:String):Void -
Object syntax
player.cueVideoByUrl({mediaContentUrl:String, startSeconds:Number, endSeconds:Number, suggestedQuality:String}):Void
Эта функция служит для загрузки значка определенного видео и подготовки проигрывателя к воспроизведению видеофайла. Проигрывателю не требуется FLV, пока не вызваны функции
playVideo()илиseekTo().- Обязательный параметр
mediaContentUrlсодержит полный URL-адрес проигрывателя на YouTube player URL в следующем формате:http://www.youtube.com/v/VIDEO_ID?version=3. В видеопотоках YouTube Data API полный URL-адрес проигрывателя содержится в теге<media:content>(в атрибутеurl), если значение атрибутаformatтега равно5. - Необязательный параметр
startSecondsпринимает значение с плавающей точкой или целочисленное значение и задает время, с которого необходимо начать воспроизведение видео при вызове функцииplayVideo(). Если задать значение параметраstartSecondsи затем вызвать функциюseekTo(), проигрыватель начинает воспроизведение с момента времени, указанного в вызове функцииseekTo(). Когда видео находится в очереди и готово к воспроизведению, проигрыватель транслирует событиеvideo cued(5). - Необязательный параметр
endSecondsподдерживаемый только в синтаксисе объектов, принимает значение с плавающей точкой или целочисленное значение и задает время, с которого необходимо остановить воспроизведение видео при вызове функцииplayVideo(). Если задать параметрendSecondsи затем вызвать функциюseekTo(), значениеendSecondsбудет недействительным. - Необязательный параметр
suggestedQualityопределяет рекомендуемое качество воспроизведения видео. Для получения дополнительной информации о качестве воспроизведения см. определение функцииsetPlaybackQuality.
-
-
loadVideoByUrl -
-
Argument syntax
player.loadVideoByUrl(mediaContentUrl:String, startSeconds:Number, suggestedQuality:String):Void -
Object syntax
player.loadVideoByUrl({mediaContentUrl:String, startSeconds:Number, endSeconds:Number, suggestedQuality:String}):Void
Эта функция служит для загрузки и воспроизведения указанного видео.
- Обязательный параметр
mediaContentUrlсодержит полный URL-адрес проигрывателя на YouTube в следующем формате:http://www.youtube.com/v/VIDEO_ID?version=3. В видеопотоках YouTube Data API полный URL-адрес проигрывателя содержится в атрибутеurlтега<media:content>, если значение атрибутаformatтега равно5. - Необязательный параметр
startSecondsпринимает значение с плавающей точкой или целочисленное значение и задает время, с которого необходимо начать воспроизведение видео. Если задать значение параметраstartSeconds(значение может быть числом с плавающей точкой), воспроизведение видео начнется с ключевого кадра, ближайшего к указанному времени. - Необязательный параметр
endSeconds, поддерживаемый только в синтаксисе объектов, принимает значение с плавающей точкой или целочисленное значение и задает время, с которого необходимо остановить воспроизведение видео. - Необязательный параметр
suggestedQualityопределяет рекомендуемое качество воспроизведения видео. Для получения дополнительной информации о качестве воспроизведения см. определение функцииsetPlaybackQuality.
-
Функции постановки в очередь для списков
Функции cuePlaylist и loadPlaylist служат для загрузки и воспроизведения плейлиста или списка видеофайлов. Если для вызова этих функций используется синтаксис объектов, вы также можете поставить в очередь или загрузить список результатов поиска или список выгруженных каким-либо пользователем видеофайлов.
Выполнение функций отличается в зависимости от того, какой тип синтаксиса используется при их вызове (синтаксис аргументов или синтаксис объектов), и ниже приведены оба метода вызова функций.
cuePlaylist-
-
Argument syntax
player.cuePlaylist(playlist:String|Array, index:Number, startSeconds:Number, suggestedQuality:String):VoidДобавляет в очередь указанный плейлист. Когда плейлист находится в очереди и готов к воспроизведению, проигрыватель транслирует событие
video cued(5).-
Обязательный параметр
playlistсодержит массив идентификаторов видео на YouTube. В видеопотоках YouTube Data API идентификатор видео содержится в теге<yt:videoid>. -
Необязательный параметр
indexиндексирует первое видео в плейлисте для воспроизведения. Параметр использует нулевой индекс, и его значение по умолчанию равно0; таким образом, по умолчанию параметр загружает и воспроизводит первое видео в плейлисте. -
Необязательный параметр
startSecondsпринимает значение с плавающей точкой или целочисленное значение и задает время, с которого необходимо начать воспроизведение первого видео в плейлисте при вызове функцииplayVideo(). Если задать значение параметраstartSecondsи затем вызвать функциюseekTo(), проигрыватель начинает воспроизведение с момента времени, указанного в вызове функцииseekTo(). Если поставить плейлист в очередь и затем вызвать функциюplayVideoAt(), проигрыватель начнет воспроизводить указанное видео с самого начала. -
Необязательный параметр
suggestedQualityопределяет рекомендуемое качество воспроизведения видео. Для получения дополнительной информации о качестве воспроизведения см. определение функцииsetPlaybackQuality.
-
-
Синтаксис объектов
player.cuePlaylist({listType:String, list:String, index:Number, startSeconds:Number, suggestedQuality:String}):VoidДобавляет в очередь указанный список видеофайлов. Это может быть плейлист, список результатов поиска или список выгруженным каким-либо пользователем видеофайлов. Когда список находится в очереди и готов к воспроизведению, проигрыватель транслирует событие
video cued(5).-
Необязательное свойство
listTypeсодержит тип получаемого списка видеофайлов. Допустимые значения:playlist,searchиuser_uploads. Значение по умолчанию:playlist. -
Обязательное свойство
listсодержит идентификатор определенного списка видеофайлов, который должен вернуть YouTube.- Если значение свойства
listTypeравноplaylist, свойствоlistсодержит идентификатор плейлиста или массив идентификаторов видео. В видеопотоках YouTube Data API идентификатор плейлиста содержится в теге<yt:playlistid>, а идентификатор видео – в теге<yt:videoid>. - Если значение свойства
listTypeравноsearch, свойствоlistсодержит поисковый запрос. - Если значение свойства
listTypeравноuser_uploads, свойствоlistсодержит идентификатор пользователя, чьи выгруженные видеофайлы будут получены.
- Если значение свойства
-
Необязательное свойство
indexиндексирует первое видео в плейлисте для воспроизведения. Параметр использует нулевой индекс, и его значение по умолчанию равно0; таким образом, по умолчанию параметр загружает и воспроизводит первое видео в списке. -
Необязательный параметр
startSecondsпринимает значение с плавающей точкой или целочисленное значение и задает время, с которого необходимо начать воспроизведение первого видео в списке при вызове функцииplayVideo(). Если задать значение параметраstartSecondsи затем вызвать функциюseekTo(), проигрыватель начинает воспроизведение с момента времени, указанного в вызове функцииseekTo(). Если поставить плейлист в очередь и затем вызвать функциюplayVideoAt(), проигрыватель начнет воспроизводить указанное видео с самого начала. -
Необязательное свойство
suggestedQualityопределяет рекомендуемое качество воспроизведения видеофайлов в списке. Для получения дополнительной информации о качестве воспроизведения см. определение функцииsetPlaybackQuality.
-
-
loadPlaylist-
-
Argument syntax
player.loadPlaylist(playlist:String|Array, index:Number, startSeconds:Number, suggestedQuality:String):VoidЭта функция служит для загрузки и воспроизведения указанного плейлиста.
-
Обязательный параметр
playlistсодержит массив идентификаторов видео на YouTube. В видеопотоках YouTube Data API идентификатор видео содержится в теге<yt:videoid>. -
Необязательный параметр
indexиндексирует первое видео в плейлисте для воспроизведения. Параметр использует нулевой индекс, и его значение по умолчанию равно0; таким образом, по умолчанию параметр загружает и воспроизводит первое видео в плейлисте. -
Необязательный параметр
startSecondsпринимает значение с плавающей точкой или целочисленное значение и задает время, с которого необходимо начать воспроизведение первого видео в плейлисте. -
Необязательный параметр
suggestedQualityопределяет рекомендуемое качество воспроизведения видео. Для получения дополнительной информации о качестве воспроизведения см. определение функцииsetPlaybackQuality.
-
-
Object syntax
player.loadPlaylist({list:String, listType:String, index:Number, startSeconds:Number, suggestedQuality:String}):VoidЭта функция служит для загрузки и воспроизведения указанного списка. Это может быть плейлист, список результатов поиска или список выгруженным каким-либо пользователем видеофайлов.
-
Необязательное свойство
listTypeсодержит тип получаемого списка видеофайлов. Допустимые значения:playlist,searchиuser_uploads. Значение по умолчанию:playlist. -
Обязательное свойство
listсодержит идентификатор определенного списка видеофайлов, который должен вернуть YouTube.- Если значение свойства
listTypeравноplaylist, свойствоlistсодержит идентификатор плейлиста или массив идентификаторов видео. В видеопотоках YouTube Data API идентификатор плейлиста содержится в теге<yt:playlistid>, а идентификатор видео – в теге<yt:videoid>. - Если значение свойства
listTypeравноsearch, свойствоlistсодержит поисковый запрос. - Если значение свойства
listTypeравноuser_uploads, свойствоlistсодержит идентификатор пользователя, чьи выгруженные видеофайлы будут получены.
- Если значение свойства
-
Необязательное свойство
indexиндексирует первое видео в списке для воспроизведения. Параметр использует нулевой индекс, и его значение по умолчанию равно0; таким образом, по умолчанию параметр загружает и воспроизводит первое видео в списке. -
Необязательный параметр
startSecondsпринимает значение с плавающей точкой или целочисленное значение и задает время, с которого необходимо начать воспроизведение первого видео в списке. -
Необязательное свойство
suggestedQualityопределяет рекомендуемое качество воспроизведения видеофайлов в списке. Для получения дополнительной информации о качестве воспроизведения см. определение функцииsetPlaybackQuality.
-
-
Элементы управления воспроизведением и настройки проигрывателя
Воспроизведение видео
player.playVideo():Void- Воспроизводит текущее видео в очереди или загруженное видео. После выполнения этой функции финальное состояние проигрывателя будет равно
playing(1).Примечание. Воспроизведение учитывается в официальном счетчике количества просмотров видео, только если видео было запущено нажатием кнопки воспроизведения в проигрывателе.
player.pauseVideo():Void- Приостанавливает воспроизведение текущего видеофайла. После выполнения этой функции финальное состояние проигрывателя будет равно
paused(2), кроме случаев, когда при вызове функции состояние проигрывателя былоended(0) – в этом случае состояние проигрывателя не меняется.
player.stopVideo():Void- Останавливает воспроизведение и отменяет загрузку текущего видеофайла. Эту функцию следует использовать в тех редких ситуациях, когда вы знаете, что пользователь не будет просматривать дополнительные видео в проигрывателе. Если нужно приостановить видеофайл, просто вызовите функцию
pauseVideo. Если вы хотите сменить видео, которое воспроизводится в проигрывателе, вызовите одну из функций постановки в очередь без вызова функцииstopVideo.Важно! В отличие от функции
pauseVideo, после вызова которой состояние проигрывателя равноpaused(2), функцияstopVideoможет поместить проигрыватель в состояние, при котором воспроизведение видео будет невозможным, например:ended(0),paused(2),video cued(5) илиunstarted(-1).
player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void- Выполняет поиск указанного времени в видеофайле. Если проигрыватель приостановлен во время вызова функции, он останется в состоянии паузы. Если при вызове функции проигрыватель был в другом состоянии (
playing,video cuedи т. д.), он начнет воспроизводить видео.-
Параметр
secondsуказывает время, к которому необходимо перейти проигрывателю.Если та часть видео, которая необходима пользователю, еще не загружена, проигрыватель перейдет к ближайшему ключевому кадру до указанного времени. Если видео загружено, проигрыватель перейдет к ближайшему ключевому кадру до или после указанного времени, в соответствии с методом
seek()объекта проигрывателя FlashNetStream. Для получения дополнительной информации см. Документацию Adobe. -
Параметр
allowSeekAheadопределяет необходимость отправки нового запроса проигрывателя серверу, если в параметреsecondsуказано время, выходящее за пределы текущего буфера видеоданных.Рекомендуется задать параметру значение
false, пока пользователь перемещает курсор мыши по полосе загрузки видео, а затем, когда пользователь отпустит клавишу мыши, задать ему значениеtrue. Так пользователь сможет переходить к разным точкам видео, не запрашивая новые видеопотоки при перемещении по небуферизованным точкам видео. Когда пользователь отпустит клавишу мыши, проигрыватель перейдет к нужной точке видео и, при необходимости, запросит новый видеопоток.
-
player.clearVideo():Void- Удаляет отображение видео. Эта функция может быть полезной, если вы хотите удалить часть видео, оставшуюся после вызова функции
stopVideo(). Обратите внимание, что эта функция исключена в API проигрывателя ActionScript 3.0.
Воспроизведение видео в плейлисте
player.nextVideo():Void- Эта функция служит для загрузки и воспроизведения следующего видео в плейлисте.
-
Если функция
player.nextVideo()вызвана во время просмотра последнего видео в плейлисте и проигрыватель настроен на повторное воспроизведение (loop), проигрыватель загрузит и воспроизведет первое видео в списке. -
Если функция
player.nextVideo()вызвана во время просмотра последнего видео в плейлисте, а проигрыватель не настроен на повторное воспроизведение, видео будет остановлено.
-
player.previousVideo():Void- Эта функция служит для загрузки и воспроизведения предыдущего видео в плейлисте.
-
Если функция
player.previousVideo()вызвана во время просмотра последнего видео в плейлисте, и проигрыватель настроен на повторное воспроизведение (loop), проигрыватель загрузит и воспроизведет последнее видео в списке. -
Если функция
player.previousVideo()вызвана во время просмотра последнего видео в плейлисте, а проигрыватель не настроен на повторное воспроизведение, будет воспроизведено первое видео в плейлисте с самого начала.
-
player.playVideoAt(index:Number):Void- Эта функция служит для загрузки и воспроизведения указанного видео в плейлисте.
-
Обязательный параметр
indexиндексирует видео, которое необходимо воспроизвести в плейлисте. Параметр использует нулевой индекс, и его значение, равное0, указывает на первое видео в списке. Если вы выбрали случайный порядок воспроизведения плейлиста, эта функция будет воспроизводить видео в указанной позиции плейлиста.
-
Регулировка громкости проигрывателя
player.mute():Void- Отключение громкости.
player.unMute():Void- Отмена отключения громкости.
player.isMuted():Boolean- Возвращает
true, если громкость проигрывателя отключена, иfalse– если нет.
player.setVolume(volume:Number):Void- Настройка громкости. Принимает целочисленное значение от
0до100.
player.getVolume():Number- Возвращает текущее значение громкости проигрывателя (целочисленное значение от
0до100). Обратите внимание, что функцияgetVolume()возвращает значение громкости, даже если громкость проигрывателя отключена.
Настройка размера проигрывателя
player.setSize(width:Number, height:Number):Object- Настройка размера тега
<iframe>с проигрывателем (в пикселях).
Настройка скорости воспроизведения
player.getPlaybackRate():Number- Эта функция служит для получения скорости воспроизведения текущего видеофайла. По умолчанию значение скорости воспроизведения равно
1, и это означает, что видео воспроизводится с нормальной скоростью. Скорость воспроизведения может принимать такие значения как 0,25; 0,5;1; 1,5; 2.
player.setPlaybackRate(suggestedRate:Number):Void- Эта функция служит для настройки рекомендованной скорости воспроизведения для текущего видеофайла. Если скорость воспроизведения меняется, это изменение затрагивает только те видеофайлы, которые воспроизводятся в данный момент или находятся в очереди на воспроизведение. При настройке скорости воспроизведения для видеофайла, находящегося в очереди, эта скорость сохранится при вызове функции
playVideoили инициации воспроизведения видео пользователем с помощью элементов управления. Кроме того, при вызове функций постановки в очередь и загрузки видео или плейлистов (cueVideoById,loadVideoByIdи т. д.) скорость воспроизведения вернется к значению1.Вызов этой функции не гарантирует изменение скорости воспроизведения. Однако, если скорость изменится, будет активировано событие
onPlaybackRateChange, и ваш код должен ответить на это событие не только вызовом функцииsetPlaybackRate.Метод
getAvailablePlaybackRatesвозвращает допустимые значения скорости воспроизведения для проигрываемого видео. Однако если вы зададите параметруsuggestedRateнеподдерживаемое значение с плавающей точкой или целочисленное значение, проигрыватель округлит его в меньшую сторону до следующего поддерживаемого значения в направлении значения1.
player.getAvailablePlaybackRates():Array- Эта функция возвращает набор значений скорости воспроизведения, доступных для текущего видео. Значение по умолчанию:
1(видеофайл воспроизводится с нормальной скоростью).Функция возвращает массив чисел, начиная от самой медленной и заканчивая самой быстрой скоростью воспроизведения. Даже если проигрыватель не поддерживает изменение скорости воспроизведения, массив всегда должен содержать по крайней мере одно значение (
1).
Настройка воспроизведения плейлиста
player.setLoop(loopPlaylists:Boolean):Void-
Эта функция используется для настройки способа воспроизведения плейлиста: непрерывное воспроизведение или остановка после завершения последнего видео в плейлисте. Действие по умолчанию: остановка после завершения последнего видео в плейлисте.
Действие этой настройки сохраняется, даже если вы загрузите или поставите в очередь другой плейлист, то есть если вы загрузите плейлист, вызовете функцию
setLoopс значениемtrue, а затем загрузите другой плейлист, он тоже будет воспроизводиться непрерывно.Обязательный параметр
loopPlaylistsиспользуется для настройки непрерывного воспроизведения.-
Если значение параметра равно
true, плейлист будет воспроизводиться непрерывно. После воспроизведения последнего видео в плейлисте проигрыватель возвращается к началу плейлиста и снова его воспроизводит. -
Если значение параметра равно
false, воспроизведение плейлиста останавливается после завершения последнего видео в плейлисте.
-
player.setShuffle(shufflePlaylist:Boolean):Void-
Эта функция используется для настройки воспроизведения видеофайлов плейлиста в случайном порядке. При настройке воспроизведения видео в случайном порядке после запуска плейлиста, порядок воспроизведения будет изменен, в то время как воспроизведение видеофайла будет продолжаться. Следующее видео для воспроизведения выбирается из реорганизованного списка.
Действие этой настройки не сохраняется, если вы загрузите или поставите в очередь на воспроизведение другой плейлист, то есть если вы загрузите другой плейлист, вызовете функцию
setShuffle, а затем загрузите другой плейлист, он не будет воспроизводиться в случайном порядке.Обязательный параметр
shufflePlaylistиспользуется для настройки воспроизведения плейлиста в случайном порядке на YouTube.-
Если значение параметра равно
true, YouTube будет воспроизводить плейлист в случайном порядке. Если использовать эту функцию для воспроизведения в случайном порядке плейлиста, который уже был реорганизован, YouTube снова его реорганизует. -
Если значение параметра равно
false, YouTube изменит порядок воспроизведения плейлиста на первоначальный.
-
Статус воспроизведения
player.getVideoLoadedFraction():Float- Возвращает значение от
0до1, означающее процент буферизации видео в проигрывателе. Этот метод возвращает более точное значение, чем уже исключенные методыgetVideoBytesLoadedиgetVideoBytesTotal.
player.getPlayerState():Number- Возвращает состояние проигрывателя. Возможные значения:
-1– воспроизведение видео не началось0– воспроизведение видео завершено1– воспроизведение2– пауза3– буферизация5– видео находится в очереди
player.getCurrentTime():Number- Возвращает значение времени, прошедшего с начала воспроизведения видео.
player.getVideoStartBytes():Number- Исключен 31 октября 2012 г. Возвращает количество байт, с которого началась загрузка видеофайла. (Этот метод не всегда возвращает значение
0.) Пример сценария: пользователь желает переместиться к моменту видеофайла, который еще не загружен, и проигрыватель отправляет новый запрос на воспроизведение незагруженного сегмента видео.
player.getVideoBytesLoaded():Number-
Исключен 18 июля 2012 г. Вместо этого метода используйте метод
getVideoLoadedFractionдля определения процента буферизации видеофайла.Этот метод возвращает значение от
0до1000, что приблизительно соответствует загруженному объему видео. Загруженный объем видео можно рассчитать, разделив значениеgetVideoBytesLoadedна значениеgetVideoBytesTotal.
player.getVideoBytesTotal():Number-
Исключен 18 июля 2012 г. Вместо этого метода используйте метод
getVideoLoadedFractionдля определения процента буферизации видеофайла.Возвращает значение размера в байтах загруженного или проигрываемого видео или приблизительный размер видеофайла.
Этот метод всегда возвращает значение
1000. Вы можете вычислить объем загруженного видео, разделив значениеgetVideoBytesLoadedна значениеgetVideoBytesTotal.
Качество воспроизведения
player.getPlaybackQuality():String- Эта функция служит для получения качества воспроизведения текущего видеофайла. Возможные возвращаемые значения:
highres,hd1080,hd720,large,mediumиsmall. Если в данный момент видеофайл не проигрывается, функция возвращает значениеundefined.
player.setPlaybackQuality(suggestedQuality:String):Void- Эта функция используется для настройки рекомендуемого качества воспроизведения текущего видео. Функция перезагружает видео с текущего момента воспроизведения с новым качеством. Если качество воспроизведения меняется, изменения затрагивают только то видео, которое воспроизводится в данный момент. Вызов функции не гарантирует изменения качества воспроизведения. Однако, если качество воспроизведения меняется, происходит активация события
onPlaybackQualityChange, и ваш код должен ответить на это событие не только вызовом функцииsetPlaybackQuality.Возможные значение параметра
suggestedQuality:small,medium,large,hd720,hd1080,highresилиdefault. Рекомендуется установить значение параметраdefault, в этом случае YouTube выбирает оптимальное качество воспроизведения, в зависимости от настроек пользователя, видеофайла, системы и других условий.При использовании рекомендуемого качества воспроизведения видео рекомендации распространяются только на это видео. Необходимо выбирать качество воспроизведения, соответствующее размеру проигрывателя видео. Например, если размер проигрывателя равен 1280 х 720 пикселей, более оптимальным будет использование качества видео
hd720вместоhd1080. Рекомендуется вызов функцииgetAvailableQualityLevels()для определения доступных для видео уровней качества.Ниже приведен список уровней качества, соответствующих стандартным размерам проигрывателей. Рекомендуется настраивать высоту проигрывателя, равную одному из перечисленных ниже значений, и использовать формат соотношения сторон экрана 16:9. Как упоминалось выше, даже при выборе стандартного размера проигрывателя рекомендуется задать параметру
suggestedQualityзначениеdefault, чтобы YouTube мог выбрать оптимальное качество воспроизведения.- Уровень качества
small: Высота проигрывателя – 240 пикселей, минимальные размеры проигрывателя для формата 4:3 – 320 х 240 пикселей. - Уровень качества
medium: Высота проигрывателя – 360 пикселей, минимальные размеры проигрывателя для формата 16:9 – 640 х 360 пикселей, для формата 4:3 – 480 х 360 пикселей. - Уровень качества
large: Высота проигрывателя – 480 пикселей, минимальные размеры проигрывателя для формата 16:9 – 853 х 480 пикселей, для формата 4:3 – 640 х 480 пикселей. - Уровень качества
hd720: Высота проигрывателя – 720 пикселей, минимальные размеры проигрывателя для формата 16:9 – 1280 х 720 пикселей, для формата 4:3 – 960 х 720 пикселей. - Уровень качества
hd1080: Высота проигрывателя – 1080 пикселей, минимальные размеры проигрывателя для формата 16:9 – 1920 х 1080 пикселей, для формата 4:3 – 1440 х 1080 пикселей. - Уровень качества
highres: Высота проигрывателя – более 1080 пикселей, что подразумевает формат соотношения сторон более 1920 х 1080 пикселей. - Уровень качества
default: YouTube выбирает оптимальное качество воспроизведения. Эта настройка устанавливает уровень качества в значение по умолчанию и отменяет все предыдущие попытки настроить качество воспроизведения с помощью методовcueVideoById,loadVideoByIdили функцийsetPlaybackQuality.
При вызове функции
setPlaybackQualityс уровнемsuggestedQuality, недоступным для видео, будет выбран следующий, более низкий, доступный уровень качества воспроизведения. Например, если вы хотите установить уровеньlarge, и он недоступен для видео, качество воспроизведения будет установлено в значениеmedium(если этот уровень доступен для видео).Кроме того, установка параметра
suggestedQualityв значение, не являющееся допустимым, аналогично установке параметраsuggestedQualityв значениеdefault. - Уровень качества
player.getAvailableQualityLevels():Array- Эта функция возвращает набор форматов качества, в которых доступно текущее видео. Эту функцию можно использовать для определения доступности видео в более высоком качестве, а ваш проигрыватель может отображать кнопку или другой элемент, с помощью которого пользователь сможет изменить качество просмотра.
Эта функция возвращает массив строк, расположенных в порядке убывания уровня качества. Возможные значения элементов массива:
highres,hd1080,hd720,large,mediumиsmall. Эта функция возвращает пустой массив, если видео в настоящий момент не проигрывается.Клиент не должен автоматически переключаться на самый высокий (или самый низкий) уровень качества или использовать неизвестный формат качества. YouTube может расширить список уровней качества и включить в него форматы, которые могут не подходить к контексту вашего проигрывателя. Также YouTube может удалить параметры качества, негативно влияющие на работу пользователя. Убедитесь, что ваш клиент использует только известные и доступные форматы, и вы можете быть уверены, что на работу клиента не повлияет ни добавление новых уровней качества, ни удаление уровней, не соответствующих контексту вашего проигрывателя.
Получение информации о видео
player.getDuration():Number- Возвращает значение продолжительности проигрываемого видео (в секундах). Обратите внимание, что функция
getDuration()возвращает0, пока не загрузятся метаданные видеофайла, что обычно случается сразу после начала воспроизведения видео.Если воспроизводимое видео является прямой трансляцией, функция
getDuration()возвращает значение времени, прошедшего с начала воспроизведения видеопотока. А именно, промежуток времени, в течение которого видеопоток воспроизводился без остановок и пауз. Как правило, продолжительность видео обычно больше, чем продолжительность трансляции, так как передача потока видео могла начаться до времени начала события.
player.getVideoUrl():String- Возвращает URL-адрес YouTube.com для текущего загруженного или проигрываемого видео.
player.getVideoEmbedCode():String- Возвращает код для вставки для текущего загруженного или проигрываемого видео.
Получение данных плейлиста
player.getPlaylist():Array- Эта функция возвращает массив идентификаторов видеофайлов плейлиста, расположенных в текущем порядке. По умолчанию, эта функция возвращает идентификаторы видеофайлов в порядке, указанном создателем плейлиста. Однако если была вызвана функция
setShuffleдля воспроизведения плейлиста в случайном порядке, функцияgetPlaylist()возвращает значение, соответствующее текущей организации файлов.
player.getPlaylistIndex():Number- Эта функция возвращает индекс проигрываемого видеофайла плейлиста.
-
Если порядок воспроизведения файлов не менялся, в возвращаемом значении будет указана позиция, в которую создатель плейлиста поместил это видео. Возвращаемое значение использует нулевой индекс, поэтому значение
0обозначает первое видео в плейлисте. -
Если плейлист был реорганизован, возвращаемое значение будет содержать номер видео в реорганизованном плейлисте.
-
Добавление и удаление функции прослушивания событий
player.addEventListener(event:String, listener:String):Void- Добавляет функцию прослушивания для определенного события
event. В разделе События описаны различные типы событий, которые может активировать проигрыватель. Значение listener – это строка, указывающая на функцию, которая будет выполнена при активации определенного события.
player.removeEventListener(event:String, listener:String):Void- Удаляет функцию прослушивания для определенного события
event. Значениеlistener– это строка, указывающая на функцию, которая больше не будет выполняться при активации определенного события.
Доступ к узлам DOM и их изменение
player.getIframe():Object- Этот метод возвращает узел DOM для встроенного тега
<iframe>.
player.destroy():Void- Удаляет тег
<iframe>с проигрывателем.
Трансляции
API активирует события, чтобы сообщить вашему приложению об изменениях, связанных с встроенным проигрывателем. Как уже говорилось в предыдущих разделах, вы можете подписаться на сообщения о событиях, добавив функцию прослушивания событий во время создания объекта YT.Player, а также использовать функцию addEventListener.
API передает объект события как один аргумент каждой из этих функций. Объект события имеет следующие свойства:
- Свойство
targetсодержит идентификатор соответствующего событию проигрывателя видео. - Свойство
dataсодержит соответствующее событию значение. Обратите внимание, что от событиеonReadyне влияет на событиеdata.
Ниже приведен список событий, активируемых API:
onReady- Это событие активируется после загрузки проигрывателя в момент его готовности к получению вызовов API. Эта функция должна быть реализована в вашем приложении, если вы хотите, чтобы определенные операции, например воспроизведение видео или отображение информации о видео, выполнялись автоматически после того, как проигрыватель готов к работе.
Ниже приведен пример функции для обработки этого события. Объект события, который API передает функции, имеет свойство
targetс идентификатором проигрывателя. Функция служит для получения кода для вставки загруженного видео, воспроизведения видео и отображения кода для вставки в элементе страницы со значениемid, равнымembed-code.function onPlayerReady(event) { var embedCode = event.target.getVideoEmbedCode(); event.target.playVideo(); if (document.getElementById('embed-code')) { document.getElementById('embed-code').innerHTML = embedCode; } }
onStateChange- Это событие активируется при изменении состояния проигрывателя.
Свойство
dataобъекта события, который API передает функции прослушивания событий, будет иметь целочисленное значение, соответствующее новому состоянию проигрывателя.Возможные значения:
-1(воспроизведение видео не начато)0(воспроизведение видео завершено)1(воспроизведение)2(пауза)3(буферизация)5(видео подают реплики).
Когда проигрыватель загружает видео в первый раз, он транслирует событие
unstarted-1. Если видео находится в очереди на воспроизведение, проигрыватель транслирует событиеvideo cued5. В своем коде вы можете указать целочисленные значения или использовать одну из следующих переменных пространства имен: В своем коде вы можете указать целочисленные значения или использовать одну из следующих переменных пространства имен:YT.PlayerState.ENDEDYT.PlayerState.PLAYINGYT.PlayerState.PAUSEDYT.PlayerState.BUFFERINGYT.PlayerState.CUED
onPlaybackQualityChange- Это событие активируется при изменении качества воспроизведения видео. Например, при вызове функции
setPlaybackQuality(suggestedQuality)событие активируется в момент изменения качества воспроизведения. Необходимо, чтобы ваше приложение ответило на это событие, не ожидая, что качество изменится автоматически при вызове функцииsetPlaybackQuality(suggestedQuality). Таким же образом, в вашем коде не должно быть предусмотрено, что качество воспроизведения изменится только при явном вызове функцииsetPlaybackQualityили любой другой функции, позволяющей настроить рекомендованное качество воспроизведения.Значение свойства
dataобъекта события, который API передает функции прослушивания событий, будет содержать строку с идентификатором нового качества воспроизведения.Возможные значения:
smallmediumlargehd720hd1080highres
onPlaybackRateChange- Это событие активируется при изменении скорости воспроизведения. Например, при вызове функции
setPlaybackRate(suggestedRate)это событие активируется в момент изменения скорости воспроизведения. Необходимо, чтобы ваше приложение ответило на это событие, не ожидая, что скорость воспроизведения изменится автоматически при вызове функцииsetPlaybackRate(suggestedRate). Таким же образом, в вашем коде не должно быть предусмотрено, что скорость воспроизведения изменится только при явном вызове функцииsetPlaybackRate.Значение свойства
dataобъекта события, который API передает функции прослушивания событий, будет содержать идентификатор новой скорости воспроизведения.Метод
getAvailablePlaybackRatesвозвращает список допустимых значений скорости воспроизведения находящегося в очереди на воспроизведение или проигрываемого видео.
onError- Это событие активируется при возникновении ошибки в работе проигрывателя.
API передаст объект
eventфункции прослушивания событий. Свойствоdataобъекта будет содержать целочисленный идентификатор типа ошибки.Возможные значения:
2— запрос содержит недопустимое значение параметра. Например, ошибка возникает при указании идентификатора видео, состоящего из менее 11 символов или содержащего недопустимые символы (восклицательный знак, символ звездочки и т. д.).5— ошибка воспроизведения запрошенного содержимого в проигрывателе HTML или другая ошибка, связанная с работой проигрывателя HTML.100— запрошенное видео не найдено. Эта ошибка возникает, если видео было удалено (по любой причине) или помечено как частное.101— владелец запрошенного видео запретил его воспроизведение во встроенных проигрывателях.150— ошибка, аналогичная ошибке101. Это другой код для ошибки101.
onApiChange- Это событие активируется после того, как проигрыватель загрузит (или не загрузит) модуль с объявленными методами API. Ваше приложение может прослушать это событие и опросить проигрыватель, чтобы определить, какие параметры объявлены для загруженного модуля. После этого приложение может получить или обновить настройки для этих параметров.
Для получения массива имен модулей, для которых можно настроить параметры проигрывателя, используется следующая команда:
player.getOptions();
В настоящее время параметры можно настроить только для модуля
cc, который служит для обработки субтитров в проигрывателе. При получении событияonApiChange, для определения параметров, которые могут быть настроены для модуляcc, ваше приложение может использовать следующую команду:player.getOptions('cc');Используя эту команду для опроса проигрывателя, вы можете проверить доступность параметров, которые вы хотите настроить. Для получения и обновления параметров модулей используются следующие команды:
Получение параметра: player.getOption(module, option); Настройка параметра player.setOption(module, option, value);
В таблице ниже перечислены параметры, поддерживаемые API:
Модуль Вариант Описание cc fontSize Этот параметр служит для изменения размера шрифта отображаемых в проигрывателе титров. Допустимые значения:
-1,0,1,2и3. Значение по умолчанию:0; минимальное значение:-1. Если в качестве значения параметра используется целое число меньше-1, будет отображаться минимальный размер шрифта; если используется целое число больше3, будет отображаться максимальный размер шрифта.cc reload Этот параметр служит для перезагрузки субтитров для воспроизводимого видео. Для получения значения параметра установите значение null. Для перезагрузки субтитров установите значениеtrue.
Воспроизведение видео на мобильных устройствах
Автоматическое и автоматизированное воспроизведение видео
В некоторых браузерах (например, Chrome и Safari) элемент HTML5 <video> позволяет воспроизводить видео только после определенных действий пользователя (например, касание на проигрывателе). Вот выдержка из документации Apple:
«Внимание! С целью предотвращения несанкционированной загрузки данных по сотовым сетям за счет пользователя, запрещается автоматическое воспроизведение встроенного мультимедийного содержимого в браузере Safari на iOS – воспроизведение всегда инициируется пользователем».
Как следствие данного ограничения некоторые функции и параметры, например autoplay, playVideo()и loadVideoById() не работают на мобильных устройствах.
Примеры
Создание объектов YT.Player
-
Пример 1: Громкое воспроизведение видео
В данном примере описано создание проигрывателя видео размером 1280 х 720 пикселей. Затем функция прослушивания событий для события
onReadyвызывает функциюsetVolumeдля установки максимального уровня громкости воспроизведения.function onYouTubeIframeAPIReady() { var player; player = new YT.Player('player', { width: 1280, height: 720, videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, 'onPlaybackQualityChange': onPlayerPlaybackQualityChange, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); } function onPlayerReady(event) { event.target.setVolume(100); event.target.playVideo(); } -
Пример 2: В данном примере выполняется настройка параметров проигрывателя для автоматического воспроизведения видео после его загрузки со скрытием элементов управления проигрывателя. Здесь также добавляются функции прослушивания событий для всех событий, транслируемых API.
function onYouTubeIframeAPIReady() { var player; player = new YT.Player('player', { videoId: 'M7lc1UVf-VE', playerVars: { 'autoplay': 1, 'controls': 0 }, events: { 'onReady': onPlayerReady, 'onPlaybackQualityChange': onPlayerPlaybackQualityChange, 'onStateChange': onPlayerStateChange, 'onError': onPlayerError } }); }
История изменений
В данном разделе приведен список изменений API проигрывателя IFrame YouTube и документации. Подписаться на журнал изменений.
April 28, 2014
This update contains the following changes:
-
The new removeEventListener function lets you remove a listener for a specified event.
March 25, 2014
This update contains the following changes:
-
The Requirements section has been updated to note that embedded players must have a viewport that is at least 200px by 200px. If a player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.
July 23, 2013
This update contains the following changes:
-
The Overview now includes a video of a 2011 Google I/O presentation that discusses the iframe player.
October 31, 2012
This update contains the following changes:
-
The Queueing functions section has been updated to explain that you can use either argument syntax or object syntax to call all of those functions. Note that the API may support additional functionality in object syntax that the argument syntax does not support.
In addition, the descriptions and examples for each of the video queueing functions have been updated to reflect the newly added support for object syntax. (The API’s playlist queueing functions already supported object syntax.)
-
When called using object syntax, each of the video queueing functions supports an
endSecondsproperty, which accepts a float/integer and specifies the time when the video should stop playing whenplayVideo()is called. -
The
getVideoStartBytesmethod has been deprecated. The method now always returns a value of0.
August 22, 2012
This update contains the following changes:
-
The example in the Loading a video player section that demonstrates how to manually create the
<iframe>tag has been updated to include a closing</iframe>tag since theonYouTubeIframeAPIReadyfunction is only called if the closing</iframe>element is present.
August 6, 2012
This update contains the following changes:
-
The Operations section has been expanded to list all of the supported API functions rather than linking to the JavaScript Player API Reference for that list.
-
The API supports several new functions and one new event that can be used to control the video playback speed:
-
Functions
getAvailablePlaybackRates– Retrieve the supported playback rates for the cued or playing video. Note that variable playback rates are currently only supported in the HTML5 player.getPlaybackRate– Retrieve the playback rate for the cued or playing video.setPlaybackRate– Set the playback rate for the cued or playing video.
-
Events
onPlaybackRateChange– This event fires when the video’s playback rate changes.
-
July 19, 2012
This update contains the following changes:
-
The new
getVideoLoadedFractionmethod replaces the now-deprecatedgetVideoBytesLoadedandgetVideoBytesTotalmethods. The new method returns the percentage of the video that the player shows as buffered. -
The
onErrorevent may now return an error code of5, which indicates that the requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred. -
The Requirements section has been updated to indicate that any web page using the IFrame API must also implement the
onYouTubeIframeAPIReadyfunction. Previously, the section indicated that the required function was namedonYouTubePlayerAPIReady. Code samples throughout the document have also been updated to use the new name.Note: To ensure that this change does not break existing implementations, both names will work. If, for some reason, your page has an
onYouTubeIframeAPIReadyfunction and anonYouTubePlayerAPIReadyfunction, both functions will be called, and theonYouTubeIframeAPIReadyfunction will be called first. -
The code sample in the Getting started section has been updated to reflect that the URL for the IFrame Player API code has changed to
http://www.youtube.com/iframe_api. To ensure that this change does not affect existing implementations, the old URL (http://www.youtube.com/player_api) will continue to work.
July 16, 2012
This update contains the following changes:
-
The Operations section now explains that the API supports the
setSize()anddestroy()methods. ThesetSize()method sets the size in pixels of the<iframe>that contains the player and thedestroy()method removes the<iframe>.
June 6, 2012
This update contains the following changes:
-
We have removed the
experimentalstatus from the IFrame Player API. -
The Loading a video player section has been updated to point out that when inserting the
<iframe>element that will contain the YouTube player, the IFrame API replaces the element specified in the constructor for the YouTube player. This documentation change does not reflect a change in the API and is intended solely to clarify existing behavior.In addition, that section now notes that the insertion of the
<iframe>element could affect the layout of your page if the element being replaced has a different display style than the inserted<iframe>element. By default, an<iframe>displays as aninline-blockelement.
March 30, 2012
This update contains the following changes:
-
The Operations section has been updated to explain that the IFrame API supports a new method,
getIframe(), which returns the DOM node for the IFrame embed.
March 26, 2012
This update contains the following changes:
-
The Requirements section has been updated to note the minimum player size.
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2022-11-04 UTC.
После обновления Chrome до версии 72 мой пользовательский проигрыватель, работающий через API Iframe YouTube, перестал работать. Это все еще отлично работает на Firefox или Chrome <= 71.
Используя приведенный ниже код, при запуске функции play() видео начинает буферизоваться, а затем останавливается без воспроизведения.
function onYouTubeIframeAPIReady() {
ytIframe = $("#player")[0];
ytPlayer = new YT.Player(ytIframe, {
events: {
'onReady': () => {},
'onStateChange': () => {}
}
});
}
function play() {
ytPlayer.playVideo();
}
Единственный способ заставить его работать — встроить видео с помощью параметра mute=1 url в iframe src. Но даже когда я делаю это, если я пытаюсь включить звук проигрывателя после playVideo (используя ytPlayer.unMute()), видео снова останавливается.
Есть идеи о том, что изменилось с этим обновлением Chrome 72? Это ошибка YouTube/Chrome или это ожидаемое поведение?
Спасибо!
#javascript #youtube-iframe-api
#javascript #youtube-iframe-api
Вопрос:
Немного странный — я впервые работаю с YouTube iFrame API, создавая обложку для сайта клиентов.
Я следовал примерам кода, предоставленным Google / YouTube (https://developers.google.com/youtube/player_parameters ?playerVersion=HTML5#IFrame_Player_API).
Проблема в том, что при нажатии кнопки воспроизведения, которая вызывает player.playVideo(), при некоторых обстоятельствах он будет воспроизводиться, но в основном, он просто обновляет видео без ошибок, зарегистрированных в консоли. Видео станет черным, как если бы оно собиралось воспроизводиться, но вместо этого оно вернется к «постеру» видео с кнопкой воспроизведения.
Вы можете просмотреть весь код здесь —https://codepen.io/james-morton/pen/BEZGvm
Я пробовал разные вещи, такие как вместо использования:
function onYouTubePlayerAPIReady() {
.. Я пробовал это в соответствии с другими примерами, но безрезультатно
window.onYouTubePlayerAPIReady = function() {
Опять же, для ясности, элементы управления иногда работают, а иногда нет — та же машина, тот же браузер, то же видео — я пробовал другие видео и тот же результат. Это действительно непоследовательно, поскольку иногда работает.
Есть идеи?
Редактировать:
После дальнейшей отладки с использованием приведенного ниже:
function onPlayerStateChange(event){
console.log('State Change: ' event.data);
}
Я вижу, что, когда оно не загружается, состояние проигрывателя изменилось с -1 (без запуска) на 3 (буферизация), а затем обратно на -1 (без запуска) при нажатии кнопки воспроизведения.
Ответ №1:
Оказывается, проблема связана с CodePen — после переноса всего кода в мою собственную среду он работает безупречно без проблем с воспроизведением через элементы управления.
Рассмотрев https://css-tricks.com/play-button-youtube-and-vimeo-api / которые используют очень похожие настройки, проблема была легко воспроизведена в CodePen, и комментарии (начиная с 2014 года) описывают проблемы, с которыми я столкнулся.
Надеюсь, это будет полезно для других, которые заметили это.
Ответ №2:
Это странно! Я не совсем «решил» эту проблему, но у меня есть некоторые отзывы. При запуске вашего кода сначала я вообще не мог заставить его воспроизводиться (либо с помощью средней кнопки воспроизведения «YT», либо с помощью пользовательской кнопки воспроизведения), но когда я использовал вашу кнопку «ff» (когда она еще не начала воспроизводиться), были очевидные признаки того, что она была активирована. Я изменил z-index в yt-player с 2 на -2, а затем смог использовать среднюю кнопку, чтобы начать воспроизведение. После первоначального воспроизведения у меня не возникло проблем с использованием пользовательских кнопок (пауза / воспроизведение работали нормально) — и я обновил и попробовал это несколько раз, каждый раз с успехом.
Одна большая проблема заключается в запуске первого воспроизведения видео с помощью пользовательской кнопки воспроизведения. Возможно, вы могли бы запустить его автоматически (возможно, с задержкой?) чтобы обойти необходимость использования средней кнопки? Я проверил ширину кнопок (чтобы увидеть, может ли заполнение / перекрытие) влиять на кнопку воспроизведения, но ничего не нашел. Я заметил, что при воспроизведении видео оно немного поднялось с исходного положения, поэтому я немного изменил css (только очень незначительная настройка). Вот моя ссылка на codepen (она не сильно отличается от вашей ..) Я надеюсь, что это поможет .. если даже немного.
Комментарии:
1. Я только сейчас увидел ваш комментарий о загрузке / буферизации .. хммм! Может быть, слишком долгое время отклика? .. слишком большое видео? Вы пробовали это с v коротким видео? Это довольно длинный видеоролик
2. Спасибо, что изучили это — таким образом, на среднюю кнопку воспроизведения в конечном итоге будет наложена пользовательская кнопка (которая затем исчезает после воспроизведения видео) — z-индекс таков, что видео появляется «позади» телевизионного кадра, поскольку оно имеет волнистые границы, которые не выглядели бы слишком великолепно, если бы видео YT было сверху. Я предложил клиенту использовать видео, размещенное самостоятельно (поскольку с ними намного проще работать), но они настаивают на YouTube.
3. @JMD да, я понял, что именно поэтому вы скорректировали z-индекс, но я перенастроил его, чтобы заставить его воспроизводиться, и обнаружил, что остальные кнопки работают нормально, проблема на самом деле только в кнопке воспроизведения. Клиенты … tch.. может быть занозой в заднице! 😉
4. @JMD кстати, причина значения max-height составляет 534-5% от этого значения (26,7 округлено до 27), так что 534-27 = 507 .. на всякий случай, если вам интересно (я не вытащил это из воздуха! смехотворно). Также (на мой взгляд) лучше использовать двойные кавычки при получении элементов по идентификатору — вот почему я заменил двойные кавычки одинарными кавычками.
Here is the code I entered in my HTML
<iframe width="640" height="360" src="https://www.youtube.com/watch?v=ZwKhufmMxko">
</iframe>
The video frame will show, but the actual video won’t load or even show up.
I have tried waiting, so it shouldn’t be a loading issue.
I also am currently only using HTML and CSS
Any ideas on how I can get this to work?
apokryfos
38.2k9 gold badges70 silver badges111 bronze badges
asked Mar 31, 2016 at 15:01
3
YouTube doesn’t allow 3rd parties to embed their site directly like that. Using
<iframe width="640" height="360" src="https://www.youtube.com/watch?v=ZwKhufmMxko">
</iframe>
will raise an error Refused to display 'https://www.youtube.com/watch?v=ZwKhufmMxko' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. to indicate this (you should really check the console for these things).
Fortunately Youtube offers the «embed video» option, which you need to use in order to embed videos.
Your linked video for example would produce the iframe code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZwKhufmMxko" frameborder="0" allowfullscreen></iframe>
answered Mar 31, 2016 at 15:12
apokryfosapokryfos
38.2k9 gold badges70 silver badges111 bronze badges
3
Change watch?v= to embed/
The easiest way to get the correct link is to right-click on the YouTube video and select copy embed code.
<iframe width="854" height="480" src="https://www.youtube.com/embed/ZwKhufmMxko" frameborder="0" allowfullscreen></iframe>
answered Mar 31, 2016 at 15:15
2
I am late to respond but here what I used to convert the youTube url to Embed and make the video work.
function getVideoId(url) {
const regExp = /^.*(youtu.be/|v/|u/w/|embed/|watch?v=|&v=)([^#&?]*).*/;
const match = url?.match(regExp);
return (match && match[2].length === 11)
? match[2]
: null;
}
const videoId = getVideoId('https://www.youtube.com/watch?v=fB4Ca1iTii8');
const iframeMarkup = '<iframe src="https://www.youtube.com/embed/'
+ videoId + '" frameborder="0" allowfullscreen></iframe>';
console.log('Video ID:', videoId) // fB4Ca1iTii8
console.log("https://www.youtube.com/embed/" + videoId)
answered Mar 28, 2021 at 18:03

