Remkomplekty.ru

IT Новости из мира ПК
2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Ютуб видео плеер

Как встроить плеер 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-оптимизации роликов.

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 мониторов.

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

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

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 » , подготовленной дружной командой проекта Интернет-технологии.ру

ВИДЕОПЛЕЕРЫ

Отличный видеоплеер с открытыми исходными кодами. Удобный интерфейс, понятное управление, масса функций, кодеки и фильтры.

VLC Media Player — свободный видеопроигрыватель. Открытый и обладающий широчайшими возможностями. Скачать.

Potplayer — это мощный видеоплеер, поддерживающий воспроизведение широкого спектра форматов видео. Включает кодеки.

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

GOM Player — популярный видеоплеер с удобным интерфейсом и набором встроенных видеокодеков. Скачать видеоплеер.

Отличный плеер для видео. Форк популярного видеоплеера Media Player Classic Home Cinema. Скачайте.

Простой видеоплеер с минимум настроек, ориентированный на воспроизведение HD-видео. Скачать плеер.

Читать еще:  Видео из кэша яндекса

Zoom Player — медиаплеер, поддерживающий все популярные видеоформаты. Заточен под просмотр DVD и Blu-ray.

SPlayer — простой, удобный и полностью бесплатный видеоплеер. Скачать видеоплеер бесплатно.

5KPlayer — это простой видеоплеер с самым минимумом настроек и поддержкой технологии AirPlay от Apple.

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

Видеоплеер с поддержкой всех самых современных мультимедиа-стандартов. Существует почти 20 лет.

SMPlayer — полностью бесплатный и очень функциональный видеоплеер. Построен на основе известного свободного проекта MPlayer.

Light Alloy — популярный видеоплеер от отечественного разработчика. Удобный и функциональный.

Свободный, мультиплатформенный видеоплеер, построенный на основе открытого исходного кода проектов MPlayer/mplayer2.

Mplayer — консольный видеоплеер. Является любовью видеофилов и линуксоидов; часто выступает основой для создания многих видеоплееров.

Проигрывание видео в браузере

Видео каких форматов можно проигрывать в браузере?

Яндекс.Браузер умеет открывать видеофайлы со следующими расширениями: mp4 , flv , swf , avi , webm , mpg , ogv , x-m4v , wmv , m4v .

Видеофайлы с расширениями mov и quicktime не поддерживаются.

Просмотр видео в отдельном окне

Вы можете просматривать видео в отдельном окне браузера. Например, можно одновременно запустить программу и видеоинструкцию к ней. Окно с видеоплеером отображается поверх всех остальных окон, в какой бы программе вы ни работали. Окно можно перетащить в любое место экрана или изменить размеры окна. Если свернуть браузер, видео продолжит проигрываться. Если видео имеет формат HTML5 и содержит субтитры (например, на Youtube у таких видео есть значок на панели управления), они тоже появятся в новом окне.

По умолчанию видео открывается в отдельном окне, когда вы переключаетесь на другую вкладку или программу. Если этого не случилось:

Для быстрого управления используйте горячие клавиши.

Вы также можете замедлить или ускорить видео. Для этого нажмите → Скорость и выберите из списка нужное значение.

Вы можете скрыть кнопку выноса видео или его автоматическое воспроизведение в другом окне:

Если вы хотите запретить вынос видео в отдельное окно, отключите обе опции.

Проблемы с видео

Видео не воспроизводится, а загружается на компьютер

Если владелец сайта запретил открывать файл в Яндекс.Браузере, файл загружается на компьютер пользователя. Чтобы открыть его в браузере, перетащите в окно браузера значок загруженного файла, появившийся справа от Умной строки, или нажмите клавиши Ctrl + O и выберите нужный файл в папке Загрузки.

Видео долго загружается или не воспроизводится

Проверьте настройки, попробуйте отключить режим Турбо, блокировку flash-данных, включить или отключить аппаратное ускорение.

Проверьте, не запрещено ли в настройках проигрывание Flash.

Иногда проигрыванию аудио или видео мешает режим Турбо. Чтобы его отключить:

Возможно, в браузере включено расширение, которое блокирует flash-баннеры и ролики. Чтобы отключить его:

Попробуйте включить или отключить аппаратное ускорение:

Если проблема осталась, напишите в службу поддержки через форму обратной связи.

При проигрывании видео возникают проблемы

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

Попробуйте включить или отключить аппаратное ускорение:

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

Ошибка «Модуль Adobe Flash Player заблокирован, так как он устарел»

Если под Умной строкой появляется сообщение «Модуль Adobe Flash Player заблокирован, так как он устарел» , обновите Flash Player. Для этого:

Браузер не поддерживает NPAPI и Unity

Яндекс.Браузер больше не поддерживает модуль NPAPI, на основе которого сделан Unity Web Player. Эта технология устарела, компания Unity также перестала поддерживать этот модуль. Подробнее об этом вы можете узнать в Блоге Яндекс.Браузера.

Установите новую, более безопасную версию Adobe Flash Player c поддержкой PPAPI.

Проигрывание видео в браузере

Видео каких форматов можно проигрывать в браузере?

Яндекс.Браузер умеет открывать видеофайлы со следующими расширениями: mp4 , flv , swf , avi , webm , mpg , ogv , x-m4v , wmv , m4v .

Видеофайлы с расширениями mov и quicktime не поддерживаются.

Просмотр видео в отдельном окне

Вы можете просматривать видео в отдельном окне браузера. Например, можно одновременно запустить программу и видеоинструкцию к ней. Окно с видеоплеером отображается поверх всех остальных окон, в какой бы программе вы ни работали. Окно можно перетащить в любое место экрана или изменить размеры окна. Если свернуть браузер, видео продолжит проигрываться. Если видео имеет формат HTML5 и содержит субтитры (например, на Youtube у таких видео есть значок на панели управления), они тоже появятся в новом окне.

По умолчанию видео открывается в отдельном окне, когда вы переключаетесь на другую вкладку или программу. Если этого не случилось:

Для быстрого управления используйте горячие клавиши.

Ссылка на основную публикацию
ВсеИнструменты
Adblock
detector
×
×