Проигрыватель видео youtube

Как встроить плеер YouTube на сайт?

Добавить плеер YouTube на сайт очень просто, и сегодня вы научитесь это делать. Также вам наверняка будет интересно узнать о дополнительных настройках плеера (размеры окна видео, автовоспроизведение, воспроизведение с определенного места и т. п.).

Лучший способ вставить видео с YouTube на сайт

Распространенная ошибка в попытке вставить YouTube-видео на сайт — добавление прямой ссылки на ролик в HTML-редактор.

Ссылка на видео, конечно, добавится, но отражаться она будет так:

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

В принципе, никто не запрещает добавлять ссылки на видео именно так. Но пользователи, кликая по ним, покидают ваш сайт, и не факт, что вернутся.

Для улучшения поведенческих факторов и удержания посетителей лучше, чтобы они смотрели видео прямо у вас на сайте. И здесь поможет лучший способ вставки видео с Ютуба — с помощью HTML.

Инструкция по добавлению плеера с помощью HTML-кода

1. Переходим на страницу видео, которое нужно добавить. Пусть это будет https://www.youtube.com/watch?v=Ppjq_BlOukQ.

2. Нажимаем кнопку «Поделиться» под роликом, а потом (во всплывающем окне) — кнопку «Встроить».

3. Копируем HTML-ссылку, заключенную в тег iframe:

4. Добавляем ссылку в режиме HTML-редактора на свой сайт (если у вас CMS WordPress, необходимо добавлять ссылку в режиме «Текст»):

5. Сохраняем и просматриваем результат:

Вот и все — видео добавлено.

Полезные настройки при вставке ролика через iframe

Центрирование

С первого взгляда видно, что ролик некрасиво встроен на страницу: окно маленькое, да и размещено несимметрично. В этом случае можно отцентрировать видео, заключив ссылку в тег:

Изменение размера плеера

Изменить размер плеера можно, поменяв значения параметров width и height в ссылке. Зададим width=810 и height=400. В результате видео точно соответствует области контента и смотрится эстетично:

Время начала воспроизведения и другие настройки

При вставке видео с Ютуба доступны полезные настройки:

После добавления и снятия галочек код для вставки изменяется автоматически.

Вот что можно настроить:

указать время начала воспроизведения (для этого устанавливаем галочку напротив надписи «Начало» и задаем время начала в секундах);
показывать похожие видео после просмотра (эта опция активирована по умолчанию; при желании галочку можно снять, и тогда пользователи не увидят списка похожих видео в конце ролика);
показывать панель управления проигрывателем (опция тоже активирована по умолчанию; если галочку снять, то пользователи не будут видеть полосу прокрутки и кнопки управления, расположенные внизу видео; остановить и развернуть ролик они смогут соответственно одиночным или двойным нажатием левой кнопкой мыши по области видео);
показывать название видео и панель действий (по умолчанию YouTube включает эту опцию; при ее отключении исчезает название ролика вверху области видео, а также кнопки «Просмотреть позже» и «Поделиться»);
включить режим повышенной конфиденциальности (опция отключена по умолчанию; если ее включить, то YouTube будет сохранять информацию о посетителях вашей страницы при условии просмотра видео).

Добавили видео на сайт? А оптимизировать не забыли? Вот бесплатный интерактивный чек-лист, который поможет найти недочеты в оптимизации и подскажет, что делать.

Настройки «для профи»

Это были базовые настройки, доступные в окне вставки видео. Но есть еще «продвинутые» опции, доступные на странице Google для разработчиков «Демонстрация YouTube Player API».

Для того чтобы настроить видео, необходимо добавить код идентификатора — это буквы после знака = в конце прямой ссылки на видео в YouTube:

Копируем код, вставляем в соответствующее поле и нажимаем кнопку «Обновить проигрыватель с выбранными настройками»:

Теперь нажимаем кнопку «Показать параметры проигрывателя» и видим развернутый список опций:

Дополнительные настройки при вставке видео с Ютуба:

включить автоматическое проигрывание видео при открытии страницы (autoplay),
принудительно включить субтитры (cc_load_policy),
задать цветовую схему полосы прокрутки (color — красная или белая),
убрать кнопку перехода в полноэкранный режим (fs),
циклически воспроизводить видео (loop);
отключить элементы управления проигрывателем (controls);
задать список роликов, которые будут последователь но воспроизводиться (playlist) и т. д.

Полный перечень и подробное описание функций представлены в справке Google.

После настройки функций надо обязательно нажать кнопку «Обновить проигрыватель с выбранными настройками». После этого можно копировать ссылку и добавлять ее на сайт.

Хотите, чтобы ваши видео собирали тысячи просмотров? Тогда им нужна оптимизация. Вот подробное руководство по самостоятельному аудиту YouTube-роликов.

Если у вас на сайте много видеороликов, то упростить работу с ними можно при помощи специальных плагинов для CMS:

WordPress (YouTube Channel, Video Sidebar Widgets, Vixy YouTube Embed и т. п.);
Joomla! (AllVideos, Simple YouTube и др.);
ModX (Videobox);
Drupal (CKEditor Youtube).

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

Заключение

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

Если вы только осваиваете YouTube в качестве автора, вам будет полезно пошаговое руководство по работе в этом видеохостинге, а также инструкция по SEO-оптимизации роликов.

HTML5-видеоплееры, о которых вы должны знать

Простой и гибкий плеер для сайта, который поддерживает YouTube-видео . Он популярен среди профессионалов и новичков благодаря своему простому дизайну, и позволяет плавно обрабатывать даже большие видеофайлы.

Полная поддержка экранных дикторов и VTT ;
Гибко настраиваемая платформа, которая позволяет пользователям изменять внешний вид по своему выбору;
Широкий спектр инструментов для обработки и редактирования;
Адаптивный дизайн с функцией полноэкранного режима.

Читать еще: Как быстро конвертировать видео

2. Videojs

Еще один плеер, который разработан с использованием HTML5 . Video.js поддерживает Flash-видео , HTML5 , Vimeo и YouTube . Можно наслаждаться воспроизведением видео с помощью Videojs на мобильных устройствах и настольных компьютерах. Этот видеоплеер был запущен в 2010 году и в настоящее время используется более чем на 200 000 сайтов.

Ключевые особенности этого плеера для сайта HTML5 :

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

3. YouTube

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

YouTube прост в использовании;
Доступен бесплатно;
Поддерживаются все форматы и браузеры.

4. Projekktor

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

Ключевые особенности этого плеера с плейлистом для сайта:

Автоматическое определение лучших способов воспроизведения видео;
Projekktor известен благодаря впечатляющему дизайну и удобству;
Профессионалы считают Projekktor одним из самых надежных решений для воспроизведения видео.

5. JPlayer

Еще один бесплатный видеоплеер с открытым исходным кодом, для которого доступна впечатляющая медиа-библиотека, написанная на JavaScript . JPlayer известен как комплексный инструмент для разработки инновационных медиа-решений.

Может быть развернут в течение нескольких минут и прост в использовании;
Полностью настраиваемая платформа с поддержкой CSS и HTML ;
Не нагружает процессор.

6. Mediaelement.js

Это продвинутый видео и аудио-плеер на HTML5 , который поддерживает Silverlight с Flash . А также предоставляет интерфейс, который корректно отображается во всех браузерах. Плеер использует обновленные и настраиваемые инструменты Flash вместе с плагинами Silverlight , чтобы все старые и новые браузеры могли использовать один интерфейс. Не нужно создавать плеер для сайта, потому что есть Mediaelement.js .

Видео и аудио-плеер разработан с поддержкой CSS и HTML ;
Mediaelement.js соответствует различным стандартам доступности, включая WebTT .

7. Afterglowplayer

Плеер поддерживает управление всеми элементами видео.

Прост в настройке и использовании;
Поддерживает множество форматов видеофайлов;
Быстрое время отклика.

Лучшие плагины HTML5-видеоплееров для WordPress

1. Responsive Video Embeds

Responsive video embeds содержит много интересных функций. Позволяет вставлять несколько видеороликов в одну запись и изменять размер встроенных видео в виде iFrames . Таким образом, они смогут вписываться в окна разных размеров.

Этот продвинутый плеер для мобильного сайта в настоящее время поддерживает почти все популярные видео, размещаемые на WordPress.TV , Revision 3 , hulu.com , Scribd , Daily motion , Vimeo и YouTube и т. д. Он доступен на бесплатной основе:

2. Video Gallery WordPress Plugin

Этот WordPress-плагин стоит от $15 . Он не только обрабатывает галереи видео, но и может работать как галерея, в которую можно добавлять аудио, изображения и видео. Он также позволяет размещать рекламу на YouTube . Чтобы помочь профессионалам в реализации маркетинговых кампаний, этот инструмент дает возможность удалять водяные знаки и заменять их новыми логотипами. А также помогает делиться контентом в социальных сетях одним кликом мыши:

3. Youtube Channel Gallery

Простой в использовании бесплатный плагин со всеми основными функциями, который позволяет встраивать плейлисты YouTube на WordPress -сайты . А также создавать список миниатюр с пользовательскими настройками канала. С помощью простых элементов управления можно персонализировать через галерею каналов YouTube все, начиная от соотношения сторон окна плеера для сайта, качества видео и продолжая типом видеопотока, темы и ссылки. Поддерживаются различные настраиваемые виджеты:

4. MediaElement.js

Продвинутый аудио-видео HTML5-плеер , который работает с Flash Fallback . С его помощью можно получить доступ к широкому спектру ярлыков для аудио и видео. Можно использовать полноэкранный режим, так как он отлично работает в Internet Explorer и Chrome .

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

MediaElements.js позволяет управлять множеством интерактивных функций одним кликом мыши. Он отлично подойдет для начинающих благодаря своему простому и удобному интерфейсу:

Данная публикация представляет собой перевод статьи « 12 best html5 video players you should know » , подготовленной дружной командой проекта Интернет-технологии.ру

Как смотреть и скачивать видео с YouTube с помощью KMPlayer

KMPlayer – мощный, функциональный, при этом бесплатный медиаплеер для Windows. В число его возможностей входит поддержка видеороликов с YouTube: плеер умеет их воспроизводить как сетевое видео и скачивать. Как воспроизвести видео с YouTube, какие возможности при этом мы получим, и как скачать нужный ролик с видеохостинга с использованием KMPlayer – обо всём этом ниже.

Возможности при просмотре видео с YouTube в окне KMPlayer

Итак, KMPlayer умеет воспроизводить видео с интернет-ресурсов, в частности, с YouTube. Но зачем заморачиваться с открытием роликов в окне десктопного плеера, если их можно смотреть в окне браузера на сайте видеохостинга? Ответ на этот вопрос точно знают те, кто вынужден работать со слабым компьютерным устройством – со старым ПК или днищенским ноутбуком с маломощным процессором. Реализуемая в браузерах технология аппаратного ускорения видео, будучи задействованной, обычно не даёт ощутимого эффекта. Тогда как мощные медиаплееры типа KMPlayer в своём богатом арсенале имеют несколько технологий аппаратного декодирования видео.

Конкретно KMPlayer может предложить нам задействование таких технологий как:
• Nvidia Cuvid – технология аппаратного ускорения за счёт ресурса видеокарт Nvidia;
• Intel QuickSync – технология аппаратного ускорения, реализованная в процессорах с архитектурой Sandy Bridge;
• DXVA2 (copy-back) и DXVA2 (native) – созданные компанией Microsoft универсальные технологии аппаратного ускорения за счёт ресурса видеокарт (вне зависимости от марки) .

Включить аппаратное декодирование видео можем прямо на панели инструментов KMPlayer с помощью кнопки «H/W — S/W», выставив её в положение «H/W». Активная кнопка «S/W» будет говорить о задействовании по факту программного декодирования.

Читать еще: Видео открывается в увеличенном виде

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

С задействованием аппаратного декорирования видео в окне медиаплеера слабые устройства, потолок которых – воспроизведение в окне браузера видео в качестве максимум 720р, могут тянуть видео 1080р. А на усреднённых устройствах можно смотреть видео 4К или 8К без тормозов, дёрганий и подвисаний, как это происходит в браузере.

О другой причине, зачем смотреть ролики с YouTube в окне десктопного медиаплеера, знают наверняка любители старых фильмов, чёрно-белых в частности. В окне функционального плеера типа KMPlayer для видеоизображения можно настроить яркость, контрастность, насыщенность, задать нужный спектр оттенков цветности. Чего нельзя сделать в проигрывателе браузера.

Ну и просмотр в десктопном плеере является решением для YouTube-роликов с ужасным качеством звучания. В KMPlayer по умолчанию применяется настройка нормализации громкости. Плюс к этому, мы сами в настройках плеера можем выставить нужное усиление звука, задать нужные параметры декодирования аудио, настроить уровни звучания для многоканальных аудиосистем и т.п.

Как воспроизвести видео с YouTube в окне KMPlayer

Чтобы открыть YouTube-ролик в окне KMPlayer, в меню «Файл» выбираем «Открыть URL / Youtube». Или просто жмём клавиши Ctrl + U .

Вставляем адрес ролика. И жмём «Ок». Можем, кстати, сразу сформировать перечень YouTube-видео: если активировать галочку «Добавить в плей-лист, но не проигрывать», видео, соответственно, будут добавлены в плей-лист проигрывателя и будут воспроизводиться сами по очереди.

Содержимое плей-листа просматривается при нажатии его кнопки на панели инструментов плеера. При необходимости добавленные в очередь YouTube-ролики можем менять местами обычным перетаскиванием.

Как скачать видео с YouTube с помощью KMPlayer

KMPlayer — это бесплатный способ скачать видео с YouTube, правда в рамках HD-качества видео. Для скачивания жмём кнопку загрузки на панели инструментов плеера.

В появившейся форме указываем ссылку ролика, выбираем параметры загрузки – формат видеофайла, разрешение (максимальное 1920х1080) , если нужно скачать только звук, то указываем тип загрузки «Audio only». И если хотим скачать звук в формате MP3 , то указываем это, иначе по умолчанию аудиофайл будет скачан в формате M4A . В итоге нажимаем кнопку «Download».

Нам будет показано окошко с предупреждением, что, мол, нельзя скачивать ролики, если их правообладатель этого не разрешает. И что скачанный файл мы должны использовать только для личных нужд, но никак не для коммерции. Жмём «Ок» в этом окошке и ставим галочку, чтобы впредь его больше не видеть.

Далее в проводнике указываем место сохранения скачиваемого файла. И дожидаемся завершения загрузки.

Как встроить плеер YouTube на сайт?

Лучший способ вставить видео с YouTube на сайт

Ссылка на видео, конечно, добавится, но отражаться она будет так:

Инструкция по добавлению плеера с помощью HTML-кода

1. Переходим на страницу видео, которое нужно добавить. Пусть это будет https://www.youtube.com/watch?v=Ppjq_BlOukQ.

2. Нажимаем кнопку «Поделиться» под роликом, а потом (во всплывающем окне) — кнопку «Встроить».

3. Копируем HTML-ссылку, заключенную в тег iframe:

5. Сохраняем и просматриваем результат:

Вот и все — видео добавлено.

Полезные настройки при вставке ролика через iframe

Центрирование

Изменение размера плеера

Время начала воспроизведения и другие настройки

При вставке видео с Ютуба доступны полезные настройки:

После добавления и снятия галочек код для вставки изменяется автоматически.

Вот что можно настроить:

указать время начала воспроизведения (для этого устанавливаем галочку напротив надписи «Начало» и задаем время начала в секундах);
показывать похожие видео после просмотра (эта опция активирована по умолчанию; при желании галочку можно снять, и тогда пользователи не увидят списка похожих видео в конце ролика);
показывать панель управления проигрывателем (опция тоже активирована по умолчанию; если галочку снять, то пользователи не будут видеть полосу прокрутки и кнопки управления, расположенные внизу видео; остановить и развернуть ролик они смогут соответственно одиночным или двойным нажатием левой кнопкой мыши по области видео);
показывать название видео и панель действий (по умолчанию YouTube включает эту опцию; при ее отключении исчезает название ролика вверху области видео, а также кнопки «Просмотреть позже» и «Поделиться»);
включить режим повышенной конфиденциальности (опция отключена по умолчанию; если ее включить, то YouTube будет сохранять информацию о посетителях вашей страницы при условии просмотра видео).

Читать еще: Запись видеоуроков с экрана

Настройки «для профи»

Теперь нажимаем кнопку «Показать параметры проигрывателя» и видим развернутый список опций:

Дополнительные настройки при вставке видео с Ютуба:

включить автоматическое проигрывание видео при открытии страницы (autoplay),
принудительно включить субтитры (cc_load_policy),
задать цветовую схему полосы прокрутки (color — красная или белая),
убрать кнопку перехода в полноэкранный режим (fs),
циклически воспроизводить видео (loop);
отключить элементы управления проигрывателем (controls);
задать список роликов, которые будут последователь но воспроизводиться (playlist) и т. д.

Полный перечень и подробное описание функций представлены в справке Google.

WordPress (YouTube Channel, Video Sidebar Widgets, Vixy YouTube Embed и т. п.);
Joomla! (AllVideos, Simple YouTube и др.);
ModX (Videobox);
Drupal (CKEditor Youtube).

Заключение

10 jQuery плееров для видео с YouTube и Vimeo

Представляю Вам восьмерку крутых, построенных на jQuery плееров для воспроизведения видео с YouTube и Vimeo. Несмотря на свои широкие возможности, они достаточно просты в установке и использовании, так что встроить любой из них на страницы вашего сайта не составит труда.

Признаюсь, я немного Вас обманул — не все представленные здесь плагины используют jQuery. Этот плагин написан на чистом JavaScript и не использует каких-либо дополнительных библиотек. Получился очень маленький (10 кБ в сжатом виде), легко настраиваемый, поддерживающий все основные современные браузеры плеер для видео с YouTube и Vimeo.

Пример
Скачать

Yottie

Плагин премиум-класса. Среди достоинств можно упомянуть следующие:

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

Стоимость: $14

Пример
Скачать

Youmax

Всего за $8 Вы получаете не только плагин для воспроизведения видео и трансляции каналов с YouTube и Vimeo, но и PhotoMax 2.0 — плагин для демонстрации фотографий с Instagram, Facebook и Google+.

Пример
Скачать

YoutubeBackground

YoutubeBackground выполняет ту же функцию, что и плагины с подборки «jQuery плагины для реализации полноэкранного фонового видео», которую мы публиковали еще в 2013 году. Этот плагин также позволяет сделать фоновое видео с YouTube. Это простая обертка Youtube API. Если Вас интересует простота и минимум «наворотов», то это как раз то, что нужно.

Пример
Скачать

PrettyEmbed.js

Простенький плагин для показа видео с YouTube. Тем не менее обладает некоторыми интересными опциями, такими как preview-картинка в высоком разрешении, различные опции, отвечающие за внешний вид и опциональная поддержка библиотеки FitVids.JS.

Пример
Скачать

Vix Youtube Player

Главная изюминка этого плеера — динамическое подстраивание под размеры контейнера и возможность работы на экранах любого размера. Работает с различными источниками — видео, плейлистами и каналами. Позволяет настраивать цвет, кнопки и текстовые метки.

Построен на базе последней версии YouTube API v3.

Пример
Скачать

Easy Video Player

Это один из самых гибких, настраиваемых и мощных видеоплееров в нашем обзоре. Способен воспроизводить видео с локальной машины, потоковое видео с любого сервера, в том числе с YouTube. Воспроизводит видео только в формате MP4, зато делает это практически в любом браузере, в том числе IE7/IE8.

Пример
Скачать

YouTube And Vimeo Video Player with Playlist

Довольно легкий (40 кБ) jQuery видеоплеер, который может воспроизводит видео с YouTube и Vimeo и демонстрировать фотографии в режиме слайд-шоу, используя более 16 спецэффектов. Обеспечивает широкую поддержку мобильных устройств, включая не только адаптивный дизайн, но и управление жестами при просмотре фотографий.

Пример
Скачать

lazyYT.js — ленивая подгрузка видео YouTube

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

Пример
Скачать

YouTube PopUp JQuery плагин

jQuery плагин, который поможет вывести ваше видео с YouTube или Vimeo во всплывающее PopUp окно. Плагин довольно прост, но имеет ряд полезных функций:

Поддержка видео с YouTube и Vimeo;
Автостарт при открытии PopUp окна;
Адаптивный дизайн;
Поддержка Retina мониторов.

Стоимость: Бесплатно

Пример
Скачать