Как сделать плеер youtube
Обновлено: 07.07.2024
(Все YouTube параметры чуть ниже) Действующих параметров на данное время всего 20 — как это видно на страницах © Google Developers. Естественно, не все их все используют, и, кстати, не все параметры могут работать друг с другом.
Чуть ниже я привел несколько примеров с параметрами. Выбрал самые нужные и часто используемые. А еще ниже показал на примере совмещение параметров для определенных случаев.
Минимальный размер окна просмотра для проигрывателей формата 16:9 составляет 480 х 270 пикселей.
ПРИМЕР:
С 2018 года для данного параметра установлено ограничение. Возможно, Вы заметите, что он не работает, но это не так, он работает, Вам просто нужно добавить к параметру дополнение (выключить звук): autoplay=0&mute=1.
Больше информации тут: Autoplay Policy Changes
ПРИМЕР:
theme=(dark,light)
Этот параметр определяет, будут ли отображаться элементы управления встроенным проигрывателем, такие как кнопка воспроизведения или регулятор громкости, на темной или светлой панели управления. Допустимые значения: dark и light. По умолчанию в проигрывателе отображается темная панель управления (dark).
ПРИМЕР:
Значения: 1 или 3. Значение по умолчанию: 1. При значении 1 аннотации видео по умолчанию будут отображаться, а при значении 3 – по умолчанию будут скрыты.
Примечание. Проще говоря, все подсказки (ссылки) в видео будут скрыты.
ПРИМЕР:
Значения: 0, 1 или 2. Значение по умолчанию: 1. Этот параметр определяет, будут ли отображаться элементы управления проигрывателем. При встраивании IFrame с загрузкой проигрывателя Flash он также определяет, когда элементы управления отображаются в проигрывателе и когда загружается проигрыватель:
controls=0 – элементы управления не отображаются в проигрывателе. При встраивании IFrame проигрыватель Flash загружается немедленно.
controls=1 – элементы управления отображаются в проигрывателе. При встраивании IFrame элементы управления отображаются немедленно и сразу же загружается проигрыватель Flash.
controls=2 – элементы управления отображаются в проигрывателе. При встраивании IFrame отображаются элементы управления, а проигрыватель Flash загружается после того, как пользователь начнет воспроизведение видео.
Примечание. Значения параметра 1 и 2 одинаково работают с точки зрения пользователя, однако значение controls=2 обеспечивает увеличение производительности по сравнению со значением controls=1 при встраивании IFrame. В настоящее время эти два значения все еще имеют некоторые визуальные различия в проигрывателе, такие как размер шрифта заголовка видео. Однако если разница между двумя значениями станет очевидной для пользователя, значение параметра по умолчанию может измениться с 1 на 2.
ПРИМЕР:
Значения: 0 или 1. Значение по умолчанию: 1. При значении 0 проигрыватель перед началом воспроизведения не выводит информацию о видео, такую как название и автор видео.
Если вы устанавливаете значение 1, после загрузки плейлиста в проигрывателе отображаются значки всех видео в списке. Эта функция поддерживается только в проигрывателе AS3, который позволяет загружать плейлисты.
ПРИМЕР:
Значения: 0 или 1. Значение по умолчанию: 1. Этот параметр определяет, будут ли воспроизводиться похожие видео после завершения показа исходного видео.
Примечание. Ниже в одном из примеров поставьте ползунок на конец просмотра и посмотрите на результат.
ПРИМЕР:
Значения: 2 (по умолчанию), 1 и 0. Определяет, будут ли элементы управления видео автоматически скрываться после начала воспроизведения.
По умолчанию (autohide=2) индикатор воспроизведения видео постепенно исчезает, а элементы управления (воспроизведение, регулировка громкости и т. д.) остаются видимыми.
Если параметр имеет значение 1, то индикатор воспроизведения видео и элементы управления скрываются после начала воспроизведения видео. Они появляются, только если пользователь наводит курсор на проигрыватель или нажимает клавишу на клавиатуре.
Если параметр имеет значение 0, индикатор воспроизведения видео и элементы управления будут видны на протяжении воспроизведения всего видео и в полноэкранном режиме.
ПРИМЕР:
* Данный параметр внедрен в настоящий плеер. Т.е. он бесполезен.
start=(180)
Значение: положительное целое число. Если этот параметр определен, то проигрыватель начинает воспроизведение видео с указанной секунды. Обратите внимание, что, как и для функции seekTo, проигрыватель начинает воспроизведение с ключевого кадра, ближайшего к указанному значению. Это означает, что в некоторых случаях воспроизведение начнется в момент, предшествующий заданному времени (обычно не более чем на 2 секунды).
end=(280)
Значение: положительное целое число. Этот параметр определяет время, измеряемое в секундах от начала видео, когда проигрыватель должен остановить воспроизведение видео. Обратите внимание на то, что время измеряется с начала видео, а не со значения параметра start или startSeconds, который используется в YouTube Player API для загрузки видео или его добавления в очередь воспроизведения.
Примечание. Эти параметры можно использовать вместе. Даже иногда нужно, чтобы точно выделить момент в определенном видео. Числа определяются в секундах, т.е. 180 = 3 мин.
За компьютером и ноутбуком мы проводим очень много времени. Наверняка многие хотели бы совмещать полезные дела и развлечения. Например, работать и смотреть любимые каналы YouTube. В современных браузерах эта возможность доступна всем пользователям благодаря полезному PopUp-окну.
Что такое PopUp-окно
PopUp-окно — это специальное всплывающее окно, которое работает параллельно с текущими вкладками, минимально перекрывая их сверху. Благодаря PopUp-окну вы сможете делать несколько действий одновременно. Приложения не будут мешать друг другу, не придется делить экран на две части или использовать дополнительный монитор, если он вам нужен был только для этого.
Браузер Opera
1. Заходим в Меню — Настройки
Браузер Google Chrome
Окно с роликом автоматически станет дополнительным.
То есть по умолчанию PopUp-окно в этом браузере не появляется, нужно каждый раз вызывать его принудительно. Удобно это или нет, решайте сами. Самая удобная и продвинутая по настройкам функция PopUp-окна представлена в Яндекс-браузере.
Яндекс-браузер
1. Заходим в Меню — Настройки.
Если данная функция включена, то во время просмотра YouTube вы увидите вот такой значок в окне ролика.
Если ее нажать, то данный ролик станет дополнительным окном в вашем браузере. Если перейти к другой вкладке в Яндекс-браузере, то ролик автоматически станет дополнительным.
Данное PopUp-окно будет всегда поверх всех других окон и программ на вашем рабочем столе. Оно не теряет никакие функции просмотра YouTube, вы можете перематывать ролик, останавливать, увеличивать/уменьшать громкость. Размер окна можно регулировать, делать его во весь экран или привязывать к любому углу экрана.
С таким PopUp-окном открываются широкие возможности и существенно экономится время для рутинных, но необходимых для выполнения задач. Также освобождается и пространство рабочего стола для других задач.
Выбирайте сами задачи, которые будете делать параллельно, будь то серфинг на сайтах и в соцсетях.
Редактирование фотографий или другие задачи.
Использовать PopUp-окно или по-старинке делать экран — решать вам. Но, объективно, если вы проводите за компьютером много времени, такой способ просмотра позволит тратить время и пространство более эффективно.
Панель управления
controls=0 – скрывает панель управления.
controls=1 – элементы управления отображаются в проигрывателе (по умолчанию).
controls=2 – работает так же как controls=1 , но обеспечивает увеличение производительности.
Кнопка полноэкранного режима
 fs=0 |  fs=1 |
Скрыть логотип YouTube
modestbranding=1 – скрывает логотип YouTube.
 modestbranding=1 |  modestbranding=0 |
Цвет прогресс-бара
Только два варианта:
color=red – красный цвет (по умолчанию).
color=white – белый цвет прогресс-бара.
Выключить звук
Автовоисприведение
autoplay=0 запустит видео сразу после загрузки страницы. Еще понадобится добавить атрибут allow="autoplay" .
Зацикленное видео
loop=1 включает воспроизведение по кругу, также нужно задать playlist=VIDEO_ID .
Начало и конец видео
start=60 – плеер начнет воспроизведение с 60-й секунды.
end=120 – воспроизведение остановится на 2й минуте.
Отключение клавиш управления
disablekb=1 – отключает управления c клавиатуры. Предусмотрены следующие:
- Пробел: воспроизведение/пауза
- Стрелка влево: вернуться на 10% в текущем видео
- Стрелка вправо: перейти на 10% вперед в текущем видео
- Стрелка вверх: увеличить громкость
- Стрелка вниз: уменьшить громкость.
Информация о видео
Плейлист
playlist=VIDEO_ID_2,VIDEO_ID_3,VIDEO_ID_4 – список видео для воспроизведения, показ начнется после основного видео (VIDEO_ID).
Загружаемый контент в плеер
Параметр listType в сочетании с list определяет контент в плеере. VIDEO_ID в URL не указывается.
listType=search&list=xxx – поиск по видео.
listType=user_uploads&list=PLxxxxxxxx – канал YouTube, list определяет id канала.
listType=playlist&list=PLAYLIST_ID – плейлист канала YouTube.
Похожие видео
rel=0 – отключает плашку с рекомендованными видео после просмотра.
rel=1 – включает ее (по умолчанию).
Разное
playsinline=1 – включает воспроизведение видео в полноэкранном режиме на iOS.
cc_load_policy=1 – выводит титры даже в том случае, если пользователь их отключил.
Видео-презентации – это отличное дополнение к странице любого продукта. С помощью презентации вы сможете продемонстрировать свойства и функции продукта, не принуждая посетителя читать множество параграфов нудного текста. Но кроме самого видео, вам нужно будет позаботиться о том, чтобы переконвертировать его в надлежащий для веб-страницы формат, а также найти (или написать) подобие плеера, который будет воспроизводить это видео на вашей странице.
С другой стороны, вы можете загрузить видео на сторонний сайт обмена видео-файлами, типа Youtube, но вы потратите значительный объем времени, подстраивая стандартный видео-плеер с сервиса Youtube под дизайн и разметку вашей страницы.
К счастью для вас, команда Youtube предлагает отличное решение данной проблемы – голую версию их встраиваемого плеера, который позволит вам собственноручно создавать оформление. Таким образом, вы получаете возможность быстрого и надежного размещения видео-файлов, а также возможность разработки внешнего оформления.
Сегодня мы создадим плагин jQuery, который будет использовать голый плеер YouTube. Мы разработаем собственные элементы управления, что должно прекрасно подходить к вашим дизайнам. Элементы управления включают в себя кнопки: Играть/Пауза/Повторить, а также строку прогресса с возможностью перехода по ней посредством мыши.
Плагин будет использовать API Youtube gdata для определения возможности интеграции конкретного видео, а также дополнительной информации о нем (заголовок, описание, тэги, скриншот и многое другое).
Данный плагин вполне легко применить для интеграции видео-файлов:
Вы также можете указать ширину встраиваемого видео (параметр высоты будет автоматически установлен в соответствии с пропорцией) и включить, либо отключить строку прогресса.
Скачайте плагин по ссылке выше, и приступайте к первому этапу.
Этап 1 – XHTML
Наш плагин будет работать с jQuery SWFObject для интеграции SWF-файлов на страницы. Ниже вы увидите совмещенную разметку, которая была сформирована посредством обоих плагинов.
: youtube-player.html
.flashContainerDiv создается динамически посредством плагина для каждого видео на странице. Он включает в себя код, сгенерированный SWFObject, .controlDiv (который представляет собой кнопку Играть/Пауза) и строку прогресса.
Как было отмечено выше, интеграция самого плеера производится при помощи плагина SWFObject. В зависимости от браузера, он может интегрироваться как объектный элемент, так и нестандартный встроенный элемент для IE. Это позволит нам не заморачиваться на этом и уделить внимание задачам по типу запроса API Youtube и создания элементов управления.
Этап 2 – Query
Код плагина находится в файле youTubeEmbed-jquery-1.0.js. Тем не менее, перед тем как мы сможем им воспользоваться, нам надо включить свежайшую версию библиотеки jQuery на страницу, а также плагин jQuery SWFObject и, наконец – script.js, который вставляет оба видео на страницу демонстрации и управляет разрешениями формы предварительного просмотра.
Перед тем, как мы углубимся в код плагина, давайте взглянем на пример ответа от API Youtube – gdata. API может дать вам много полезной информации о видео, включая его длительность, доступные возможности (которыми можно воспользоваться посредством плагина), а также всю дополнительную информацию (заголовок, описание, тэги, скриншоты и многое другое).
: Пример ответа JSON
Все поля данного объекта ответа доступны в качестве параметров в переменной data (data.fieldname). Вы можете усовершенствовать плагин для отображения заголовка с ссылки на страницу с видео в сервисе Youtube, или добавить отображение рейтинга видео.
Теперь давайте посмотрим на исходный код.
: youTubeEmbed-jquery-1.0.js – Часть 1
Начинаем мы с определения нашего скрипта в качестве плагина jQuery, добавив его как функцию в $.fn object. Для того чтобы код было легче читать и понимать, мы размещаем все элементы на странице (DIV’ы элементов управления и progressBar) в структуру под названием elements.
После извлечения ID видео-файла (уникальный 11-значный номер, следующий после параметра ?v=), мы отправляем запрос JSONP в API Youtube – gdata. В зависимости от наличия данного видео и разрешения его интеграции, мы выполняем калькуляцию пропорции видео. Параметр высоты видео вычисляется посредством соотношения пропорции сторон видео и его ширины.
: youTubeEmbed-jquery-1.0.js – Часть 2
Во второй части кода мы используем плагин SWFObject для генерации кода встраивания плеера Youtube. Учтите, что Id видео проводится как flashvar, так что плеер сможет подгрузить его напрямую. Переменная safeID (безопасная javascript-версия videoid) становится значением параметра id объекта элемента, который должен быть сгенерирован. Таким образом, в дальнейшем мы сможем извлечь DOM-элемент, запустив document.getElementById(‘video_’+settings.safeID) и получив доступ к событиям, которые управляют плеером Youtube (играть/пауза и т.д.).
: youTubeEmbed-jquery-1.0.js – Часть 3
Для того чтобы иметь возможность управлять плеером, нам нужно быть осведомленными в том, когда выполняются конкретные события (проигрывание остановлено, видео готово и так далее). Теоретически, это должно означать то, что нам надо запустить функцию обратного отзыва, которая выполняется плеером каждый раз, когда производится событие.
К несчастью, Flash может производить лишь те функции, которые определены мировыми рамками, и мы не можем видеть функции, которые определены в рамках плагина. Тем не менее, создавая функции с присвоенными уникальными именами (посредством safeID) и последующим добавлением их к оконному объекту, мы можем это реализовать. Если бы не было такого интересного трюка, то плагин вряд ли бы заработал.
: youTubeEmbed-jquery-1.0.js – Часть 4
Теперь давайте посмотрим на то, как наш плагин используется.
Вам просто нужно вызвать youTubeEmbed() и пропустить его через строку или объект конфигурации. Если пропущена строка, то она будет расценена как ссылка на видео в сервисе YouTube. Если вы пропускаете объект, то убедитесь в том, что вы пропускаете параметр видео с корректной ссылкой на видео-файл.
Этап 3 – CSS
Теперь нам осталось применить стили и форматирование к плееру. Это даст возможность изменить дизайн элемента управления плеером, а также поможет нам расположить плеер внутри окна.
: youTubeEmbed-jquery-1.0.css
Для того чтобы отредактировать внешний вид плеера, вам нужно поменять значения цветов, указанные выше. Вы также можете отредактировать PNG-файлы, отвечающие за кнопки паузы и старта воспроизведения. Это гораздо проще, чем изменять внешний вид плеера Youtube. Это также поможет нам убрать все лишнее, и оставить лишь то, что нам нужно – самое видео.
Нам этом на плагин плеера готов!
Вам понравилась эта статья? Поделитесь мыслями в комментариях!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:
Читайте также: