Вход
Вы вошли на сайт, как Гость
Авторизация через ВконтактеАвторизация через FacebookАвторизация через TwitterАвторизация через ОдноклассникиАвторизация через Mail.RuАвторизация через GoogleАвторизация через Яндекс
Внешний вид сайта

Какой вид сайта Вы предпочитаете?



Рассылка

Подпишитесь на рассылку наших новостей, чтобы всегда быть в курсе последних обновлений!

Ваше имя: *

Ваш e-mail: *

* Звёздочкой помечены обязательные поля для заполнения

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

Статистика
Сейчас на сайте:
Cтатей: 79
Партнёрских продуктов: 135
Файлов: 62
Секретных материалов: 105
Товаров: 3
Галерей: 2
Альбомов: 0
Заметок: 26
Комментариев: 13
Пользователей: 70
Подписчиков: 165
Посетителей на сайте: 5
Реклама
Мы Вконтакте
Tak.ru

Как разместить видеоролик с YouTube на своём сайте?

Как разместить видеоролик с YouTube на своём сайте?

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

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

К примеру, ссылка на фильм "Йән" - первый башкирский короткометражный фильм ужасов:

http://youtu.be/ECTqYv83kw0

Если же мы хотим разместить этот видеоролик у себя на сайте, блоге или форуме, нам понадобиться html-код, который можно сгенерировать на YouTube на странице этого ролика:

HTML-код

При этом видео будет выглядеть следующим образом:

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

Для начала рассмотрим все основные элементы полученного html-кода:

<iframe width="560" height="315" src="http://www.youtube.com/embed/ECTqYv83kw0" frameborder="0" allowfullscreen></iframe>

Код состоит из тегов <ifarme></iframe>, которые указывают на внутренний фрейм, который позволяет встраивать на страницу другие внешние объекты, в нашем случае - это проигрыватель YouTube. С помощью атрибутов height и width задаются высота и ширина фрейма в пикселах. Атрибут frameborder задает толщину границы фрейма. А атрибут allowfullscreen разрешает просмотр видеоролика в полноэкранном режиме.

Также у тега <iframe> есть и другие атрибуты, которые могут быть полезны в некоторых случаях.

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

Ссылка на видеоролик YouTube может иметь следующий вид:

где в квадратных скобках указаны обязательные части - это HTTP или HTTPS-протокол и уникальный 11-и значный код видео, указывающий на нужный нам видеоролик на видеохостинге,
а в фигурных скобках указываются дополнительные параметры видеопроигрывателя Youtube, отвечающие за внешний вид самого проигрываетля, время, место и порядок воспроизведения видеоролика и различные функции по настройке данного видео (выбор качества, отображение название, рейтинга, субтитров и пр.).
В этом случае после кода видео ставится знак "?", который указывает браузеру на наличие дополнительных параметров.
С помощью знака "=" каждому параметру присваивается определённое значение.
Если используется несколько параметров, то они разделяются знаком "&".

Порядок размещения параметров значения не имеет.

Вот пример ссылки на тот же фильм "Йән" с дополнительными параметрами:

http://www.youtube.com/embed/ECTqYv83kw0?rel=0&version=1&controls=0&autoplay=0&hd=1&fs=0&showinfo=0

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

http://www.youtube-nocookie.com/embed/ECTqYv83kw0

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

Иногда встречаются ссылки (v-ссылки) вида http://youtube.googleapis.com/v/ECTqYv83kw0, которые также неплохо работают.

Итак переходим к самому интересному - описанию основных параметров.

Внешний вид проигрывателя YouTube:

version=1 - версия оболочки проигрывателя, 1 - более новая (по умолчанию), 2 - старая (этот параметр работает только для v-ссылок, а для embed-ссылок - не работает)

theme=dark - тёманя тема (по умолчанию)/light - светлая тема

Пример "светлого" видеопроигрывателя YouTube версии 1

border=0 - включает/выключает отображение рамки вокруг проигрывателя, 1 - рамка отображается, 0 - рамка не отображается (по умолчанию, этот параметр работает только для v-ссылок, а для embed-ссылок - не работает)

color=red/white - задаёт цвет полосы воспроизведения (красный или белый), красный - по умолчанию

color1 - задаёт основной цвет рамки RGB в шестнадцатеричном формате 0xb1b1b1

color2 - задаёт фоновый цвет панели управления и дополнительный цвет рамки в шестнадцатеричном формате 0xb1b1b1

Пример отображения проигрывателя YouTube с цветной рамкой и панелью управления

Воспроизведение видео:

autoplay=1 - автозапуск видео (воспроизведение видео начинается сразу после загрузки проигрывателя), 0 - выключено (по умолчанию), 1 - включено

loop=0 - включение повтора видео, 0 - повтор выключен (по окончанию видео остановится, по умолчанию), 1 - повтор включен (видео будет повторяться непрерывно) (этот параметр работает только для v-ссылок, а для embed-ссылок - не работает)

start=5 - запуск видео с 5ой секунды (см. пример ссылки: http://www.youtube.com/embed/ECTqYv83kw0?start=5)

end=10 - остановка видео на 10ой секунде (см. пример ссылки: http://www.youtube.com/embed/ECTqYv83kw0?end=10) (этот параметр работает только для embed-ссылок, а для v-ссылок - не работает)

Также воспроизведение видео можно запустить с нужного нам момента времени добавив к ссылке #t=03m22s, где m - минуты, s - секунды. Пример ссылки: http://www.youtube.com/embed/ECTqYv83kw0?#t=03m22s. Если длительность видео меньше указанного значения, то видео начнет воспроизводиться сначала с первой секунды.

Пример воспроизведения видео с 5ой секунды без остановок

Скрытие/показ элементов управления:

Параметры отображения элементов управления

fs=0 - отображение кнопки перехода в полноэкранный режим, 0 - не отображать, 1 - отображать (по умолчанию)

controls=0 - отображение панели управления, 0 - не отображать, 1 - отображать (по умолчанию)

autohide=1 - автоматическое скрытие/появление панели управления через несколько секунд после прекращения движений мышью или нажатий клавиш, 0 - панель управления отображается постоянно (по умолчанию), 1 - панель скрывается

showinfo=0 - отображение названия, рейтинга и информации о видео сверху, 0 - не отображать, 1 - отображать (по умолчанию)

modestbranding=0 - отображение кнопки "просмотр на YouTube" на панели управления, 0 - кнопка включена (по умолчанию), 1 - кнопка выключена

Пример отображения проигрывателя YouTube без кнопок "Смотреть на YouTube.com" и просмотра в полноэкранном режиме

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

Разрешение/запрет использования горячих клавиш и просмотр HD-видео:

disablekb=1 - запретить горячие клавиши управления проигрывателем, 0 - разрешить (по умолчанию, этот параметр работает только для v-ссылок, а для embed-ссылок - не работает), 1 - запретить (см. горячие клавиши)

hd=1 - разрешить просмотр видео в HD-формате, 0 - запретить, 1 - разрешить (по умолчанию) {данный параметр почему-то не работает}

Отображение джинн-меню:

rel=0 - загрузка и отображение похожего видео в джинн-меню после просмотра исходного видео, 0 - не загружать, 1 - загружать (по умолчанию, этот параметр работает только для embed-ссылок, а для v-ссылок - не работает)

Параметры отображения джинн-меню

egm=0 - включает расширенное джинн-меню, 0 - выключено, 1 - включено - в этом режиме джин-меню (если оно есть) открывается при прохождении указателя мыши над областью воспроизведения видео, а не по нажатию кнопки меню (по умолчанию, этот параметр работает только для v-ссылок, а для embed-ссылок - не работает; когда проверял это свойство, то заметил, что во время воспроизведения при значении egm=1 пропадает логотип YouTube а при наведении в правый нижний угол и нажатии на левую клавишу мыши перехода на сайт YouTube не происходит) {Честно сказать, с этим параметром остались какие-то сомнения и неопределенности, и очень хочется спросить у разработчиков: "А что же такое джинн-меню и где оно появляется?"}

showsearch=0 - вывод окна поиска при свернутом видео, 0 - поиск отключен/не отображается, 1 - поиск включен/отображается (по умолчанию, этот параметр работает только для v-ссылок, а для embed-ссылок - не работает)

Аннотации и субтитры:

iv_load_policy=3 - отображение аннотаций; если в данном видео есть аннотации, то при значении 1 аннотации будут отображаться, а при значении 3 - будут скрыты (по умолчанию)

cc_load_policy=0 - отображение субтитров, 0 - субтитры не отображаются (по умолчанию), при значении 1 субтитры будут отображаться даже если они отключены пользователем

Дополнительные параметры:

fmt=6/18/22 - для воспроизведения видео в низком/среднем/высоком качествесоответственно, (при fmt=22 исходное видео должно быть загружено с высоким качеством) {данные параметры не работают}

hl=ru_RU – устанавливает локальные (языковые) предпочтения для видео, читается как "для русскоговорящих людей" (при желании их можно поменять)

enablejsapi=1 - разрешает/запрещает использование JavaScript API, 0 - запрещает (по умолчанию), 1 - разрешает, при этом ссылка на документацию по настройкам появляется слевой стороны страницы {следует уточнить}

playerapiid=player1 - строковое значение наименования проигрывателя для обращения через JavaScript API {следует уточнить}

Ну и в завершение стоит добавить, что существует ещё один устаревший, но проверенный способ вставки видео YouTube на сайт, который лучше "переваривается" старыми браузерами.

<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/ECTqYv83kw0?hl=ru_RU&version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/ECTqYv83kw0?hl=ru_RU&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

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

Пример видео, вставленного с помощью метода <object>

Горячие клавиши:

Пробел: воспроизведение/пауза

Стрелка влево: вернуться на 10% в текущем видео

Стрелка вправо: перейти на 10% вперед в текущем видео

Стрелка вверх: увеличить громкость

Стрелка вниз: уменьшить громкость

Дополнения и рекомендации:

1. Для "продающей страницы" лучше всего использовать ссылку

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

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

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

3. Для того чтобы размещённое на сайте видео показывалось в HD-качестве достаточно в конце дописать ?vq=hd720 или ?vq=hd1080. Подробности на сайте http://evgeniypopov.com/blog/kak-vyivesti-youtube-video-srazu-v-hd-kachestve.html.

Примечание: для выполнения этого параметра исходное видео должно быть изначально в HD-формате.


Похожие материалы:

Параметры встроенного проигрывателя YouTube

Секреты YouTube

PS: Данное видео подготовлено студией © E7E-media и надеюсь что, оно Вам понравится.

Беседа с создателями первого башкирского короткометражного фильма ужасов "Йән"


Оцените заметку: 0 1 2 3 4 5


Понравился материал?
Поделись со своими друзьями в социальных сетях!

Нравится:



Расскажите о нас своим друзьям:






Подпишитесь на рассылку наших новостей, чтобы всегда быть в курсе последних обновлений!

Ваше имя: *

Ваш e-mail: *

* Звёздочкой помечены обязательные поля для заполнения

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


Комментарии Вконтакте:

Комментарии Facebook:


Комментарии:

Здесь комментариев пока нет.

Оставить комментарий

Ваш e-mail необходим только для связи с Вами и не публикуется на сайте.

* Звёздочкой помечены обязательные поля для заполнения

Поиск
Поисковый запрос должен быть не менее 4-х символов
WMR-бонус

Получи WMR-бонус!
Для получения WMR-бонуса введите Ваш WMR-кошелёк и код с картинки и нажмите на кнопку "Получить бонус"

WMR-кошелёк:

Код
Код:
Поддержка