Polytech-soft.com

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

Плеер ютуб на сайт

Youtube Player — создание собственного плеера на JavaScript

Вступление

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

Для обычного пользователя снаружи ссылка на видео может выглядеть таким образом: www.youtube.com/watch?v=
Как многие знают, для вставки собственно видео на свой сайт существует простая возможность «скопировать HTML код» при нажатии на видео правой кнопкой в Youtube и получить в буфере iframe:

Таким iframe как раз и можно управлять на своем сайте. Далее расскажу, как это сделать на примере формирования своих элементов управления и обработчиков событий на Javascript + Jquery.

Страница с плеером — верстка

Сначала создаем простую html-страничку, в которой будут несколько div-block’ов, на которые мы привяжем наш плеер.

И самое главное — javascript.

Для создания и инициализации плеера через iframe api необходим div с идентификатором, к которому будет привязываться iframe с видео. В нашем случае это

Управление плеером — JavaScript

Все равно, куда вы его положите, но главное ниже подключаемых библиотек (для простоты можно прямо в html-документе).

А теперь как это работает. Для начала создаем плеер — для этого нужна обязательная функция:

Она вызывается сама по видимому сразу, а внутри нее создается объект YT.Player с параметрами. Первый ‘player’ — идентификатор к которому при инициализации цепляется iframe. Далее height и width — размеры iframe, videoId: ‘CyVuYAHiZb8’ — идентификатор видео — это наш Рэй Чарльз. playerVars: < 'autoplay': 0, 'controls': 0, 'showinfo': 0, 'rel': 0>— это настройки плеера, сами говорят за себя -стоят нули, чтобы выключить элементы управления, которые мы делаем свои.

И events: <'onReady': onPlayerReady>— хук, цепляющий метод для обработки события готовности. Дальше как раз идет эта функция, в ней собраны методы для обработки событий и т.п.

Теперь что касается объекта player. Он создан и им можно управлять, вызывая методы, как в панели управления в html — кнопочки.

Кнопки play и pause
— play
— pause
Здесь все просто плей-пауза

Кнопки back и next

Эти кнопки нужны для переключения видео в плейлисте.

Для создания плейлиста есть кнопка
— которая вызывает функцию по клику.

Эта функция вызывает метод player.loadPlaylist (<. >)

с параметрам playlist’: [‘9HPiBJBCOq8’, ‘Mp4D0oHEnjc’, ‘8y1D8KGtHfQ’, ‘jEEF_50sBrI’] — список видео в плейлисте. ‘listType’: ‘playlist’ — тип, ‘index’: 0 — индекс видео, с которого начать, остальные параметры очевидны. Так загружаются плейлисты. Также плейлист можно инициализировать прямо в начале, тогда нужно в параметрах объекта YT.Player прописать playerVars: < 'autoplay': 0, 'controls': 0, 'showinfo': 0, 'rel': 0, playlist': ['9HPiBJBCOq8', 'Mp4D0oHEnjc', '8y1D8KGtHfQ', 'jEEF_50sBrI'] >,

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

А также качество

Здесь кратко описаны функции для работоспособности панельки. В итоге — Кнопки Play, Pause, есть кнопка загрузки плейлиста из 3-х видео, Next и Back для плейлиста, фейдер и линия прогрузки, обновляющееся время, кнопки, демонстрирующие работу громкости, качества и фуллскрин — все это начальные сведения для разработки собственного плеера, взаимодействующего с Youtube Iframe.

Демо вариант доступен Вот тут

При написании статьи использовался мануал от Youtube в котором можно найти расширенное описание работы с Youtube iframe API здесь

Обзор качественных плееров для youtube

Многие владельцы смартфонов пользуются стандартным приложением для просмотра роликов, не подозревая, что есть продвинутые медиаплееры……….

Улучшенная эргономика, обновленный интерфейс, расширенный функционал и возможности – далеко не весь перечень преимуществ, которые есть в сторонних приложениях………………………….

→ Давайте рассмотрим самые лучшие плееры для просмотра видео с Ютуб на компьютере и мобильном телефоне ↓↓↓

Для чего нужен Проигрыватель и его основные функции

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

Плеер представляет собой программу — предназначенную для просмотра Ютуба напрямую.

Сейчас можно найти несколько десятков таких утилит, которые будут отличаться, как по функционалу, так и по внешнему виду……

Среди основных функций таких плееров можно выделить: ↓↓↓

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

Лучшие версии для просмотра с компьютера

Ниже мы представим обзор 3 наиболее популярных плеера для просмотра Ютуба, которые вы можете скачать абсолютно бесплатно

Эти приложения помогут вам в любой момент насладиться любимым роликом в наилучшем качестве .

Место 1. KMPlayer – удобный и функциональный

Благодаря понятному интерфейсу и интуитивному управлению, эта программа заслуживает лучшей отметки — 10 Звезд

• Это не просто плеер, а ваш помощник, помогающий: ↓

  1. воспроизводить практически все форматы
  2. производить захват видео
  3. делать скриншоты и многое другое.

Вот вам подробный видео-обзор

• Главная изюминка – это воспроизведение потокового видео с YouTube. Вы без проблем можете вставить ссылку на ролик и наслаждаться просмотром через KMPlayer.

Место 2. BSPlayer – золотая середина

Читать еще:  Ютуб включить все

В этой программе есть практически все, что вы искали.

BSPlayer без проблем воспроизводит ролики в офлайн-режиме, а также проигрывает потоковое видео .

В настройках плеера для просмотра Ютуб вы можете выбрать такие опции: ↓

  • перехват видео с Ютуб;
  • работа с субтитрами;
  • задать формат воспроизведения;
  • выбор тем оформления.

Эта программа сможет в полном объеме оправдать ожидания тех, кто любит просматривать FHD ролики с 60 FPS на Ютубе.

Скачать плеер вы можете на официальном сайте http://www.bsplayer.com/bsplayer-russian/download-free.html

Место 3. ComboPlayer – ваш мультимедийный комбайн

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

→ Также вы можете прослушивать радио, cсмотреть TV и другое.

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

Вас порадует :

  1. возможность воспроизводить практически все известные форматы
  2. выбор трансляций через удобное меню
  3. и поддержка субтитров.

• Также еще одна фишка утилиты – возможность делать снимки с экрана, используя горячие клавиши !

Для просмотра Youtube на Андроид

Для пользователей смартфонов принципиально важно открыть тот или иной ролик максимально быстро. Для этого потребуется простая утилита с интуитивно простым интерфейсом………..

Давайте рассмотрим, какой плеер лучше для просмотра Ютубе на мобильном гаджете ↓↓↓

Место 1. MX Player – лучшее решение для смартфона

Вы искали плеер, который мог бы воспроизводить потоковое видео и ролики на вашем смартфоне, тогда обратите внимание на MX Player. Это одна их лучших программ, сочетающая в себе качественный и дружелюбный интерфейс, а также неограниченные возможности.

С помощью MX Player вы можете: ↓↓↓

  • использовать декодирование;
  • масштабировать пальцами;
  • использовать умную блокировку;
  • жесты субтитров.

Место 2. Floating Tube – очень удобный

Изюминка этой программы в том — что все ролики можно воспроизводить в отдельном окне.

• То есть, на главном экране появляется плавающий плеер, который всегда можно свернуть, переместить или закрыть.

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

Внимание — этот плеер подходит для просмотра ютуб на нокиа 500, а также других популярных моделях .

Место 3. Tube Player – просто и со вкусом

Если хотите найти аналог стандартному приложению, тогда Tube Player – это именно то, что вы так давно искали.

Здесь реализованы лишь основные функции для поиска и просмотра, за счет чего это приложение и заслуживает статус лучшего.

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

После этого помощник отражает все ролики, соответствующие интересу, и вы можете их просматривать без проблем.

P.S — вот классный проигрыватель на iphone / ios ↓

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

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

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

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

Изменить размер плеера можно, поменяв значения параметров w >

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

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

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

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

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

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

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

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

Читать еще:  Сделать шапку для канала ютуб

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

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

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

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

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

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

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

Если у вас на сайте много видеороликов, то упростить работу с ними можно при помощи специальных плагинов для 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-оптимизации роликов.

Как вставить видео с Youtube на свой сайт и настроить дополнительные функции проигрывателя

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

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

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

Для чего вставлять видео на сайт

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

Но, все-таки, свой сайт действует более эффективно, так как позволяет использовать разные виды контента.

1. Улучшение поведенческих факторов

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

2. Увеличение конверсии

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

3. Дополнительная аудитория

Все мы воспринимаем информацию по разному, кто-то предпочитает текст, а кто-то отдает свое предпочтение видео контенту. Если мы используем на своем сайте разные варианты подачи информации, то привлекаем к нему и первых и вторых.

Как можно вставить видео на сайт

Существует два способа вставить на сайт свое видео.

  • Выложить файл с роликом на свой хостинг, подключить видео плеер и транслировать кадры прямо со своего сервера. Для обычного сайта этот вариант не самый лучший, так как такие файлы занимают много места (десятки и сотни мегабайт), а их трансляция одновременно большому числу зрителей создаст вашему серверу немалую нагрузку.
  • Разместить клип на видео хостинге (Youtube, Rutube), а для трансляции на страницах, использовать специальный код. В таком варианте все нагрузки ложатся на сервера видео хостинга, вы экономите место и снижаете нагрузку на сервер. Кроме того, Ютуб имеет огромную аудиторию и это дополнительный канал продвижения.
Читать еще:  Глючит ютуб на андроиде

Как вставить видео с Ютуба на сайт

Итак, со способами вставки мы определились, теперь давайте перейдем к конкретной инструкции.

Еще один плюс использования Youtube, о котором я не сказал выше – возможность вставки не только своих роликов, но и чужих. Если вы будете вставлять чужие ролики, то вам даже не понадобится регистрация в Ютубе.

1. Стандартные настройки кода

Первым делом открываем страницу того ролика, который будем вставлять.

Под каждым видео есть блок с настройками и описанием. В этом блоке необходимо найти ссылку «Поделиться» и нажать на нее. В раскрывшейся панели переключаемся на HTML код.

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

Как правило, требуется корректировка размеров, встраиваемого видео. Для этого нажимаем на ссылку «Ещё», которая открывает дополнительную панель.

Здесь мы можем выбрать из выпадающего списка один из стандартных размеров проигрывателя, либо задать произвольные размеры. При указании ширины, высота будет подбираться автоматически таким образом, чтобы сохранялись пропорции.

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

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

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

2. Дополнительные (скрытые) настройки

Автоматическое воспроизведение видео с Youtube

Включить или отключить автоматическое воспроизведение видео на Youtube можно с помощью элемента «&autoplay=». Если после знака равно стоит 1, то видео будет автоматически запускаться, если такого элемента нет или он равен 0, то автозапуска не будет. Добавляется элемент таким образом:

Запуск видео с определенного момента

Можно настроить проигрыватель таким образом, чтобы ваш ролик запускался не с начала, а с указанной заранее секунды. Для этого добавляется «#t=». После знака равенства указывается время (отдельно минуты, отдельно секунды). Выглядеть будет вот так:

Добавление субтитров

Русские субтитры включаются следующим кодом «&cc_lang_pref=ru&cc_load_policy=1». В инструкции от Youtube говорится, что язык субтитров переключается с помощью значения cc_lang_pref. RU означает русские, но мой эксперимент показал, что и при FR (французский) все равно показываются русские субтитры. Код выглядит вот так:

Когда код полностью готов, переходим к его вставке на страницу.

3. Как вставить код видео с Youtube на HTML сайт

Для установки открываете HTML файл вашего сайта в текстовом редакторе (notepad+, akelpad или др.). Находите в коде место, где должно выводиться видео и добавляете, полученный ранее, код. После сохранения на вашей странице появится проигрыватель с теми настройками, которые вы сделали.

Нашел специально страницу, которую делал давно на HTML со встроенным видео, вот как там выглядит такой код:

4. Установка кода с Ютуб на WordPress

Процедура вставки кода на WordPress ничем не отличается, разве что делается все проще. Не нужны текстовые редакторы.

Для вставки видео в статью открываете встроенный редактор WordPress, переключаете его в режим «Текст». Находите нужное место в статье и вставляете туда код проигрывателя. Сохраняете и все работает.

Вставлять в виджеты еще проще, так как там нет визуального редактора и, всегда идет работа только с кодом. Открываете редактор виджетов, вставляете код, сохраняете.

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

5. Как вставить видео на Ucoz, Blogspot, Livejournal

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

Как поменять размер видео в готовом коде

Если размер видео, который у вас получился после настройки кода не подошел к вашему сайту (например, вы сменили дизайн и ширина сайдбара у вас уменьшилась) не обязательно идти в Youtube и делать новый код. Можно вручную поменять цифры, отвечающие за ширину и высоту проигрывателя (w >

Точно также вы можете руками поправить все характеристики плеера, описанные выше.

Ссылка на основную публикацию
Adblock
detector