Html код видео на Youtube где взять

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

Самый простой способ вывести видео на странице это прописать такой код:

• id — идентификатор для тега, размеры видео (ширина, высота),
• src — путь к видеофайлу, poster — картинка, которая будет заставкой для окна видео,
• controls — подключение встроенной в браузер панели управления для видео (у каждого браузера свои элементы управления),
• preload — возможность начать загрузку видео сразу при при открытии страницы, что позволит запустить видео без задержек на загрузку, которая при стандартных настройках начнется только после нажатия кнопки Play.

Из всех этих параметров обязательным является только src — путь к файлу видео, остальные по желанию. Более подробно про тег можно прочитать здесь.

Добавляем код Youtube-ролика. Курс по HTML (17 из 20)

Но во время размещения видео столкнулись с некоторыми проблемами, потому как разные браузеры поддерживают разные кодеки и поэтому не все воспроизводят видео в формате .mp4. Пришлось искать программы для конвертации видео в нужные форматы, помогли эти программы:

DVDVideoSoft Free Studio — программа для конвертации видео в формат .ogv
FreeWebMVideoConverter — программа для конвертации видео в формат .webm

И на сайте разместили по итогу такой код для вывода видео:

Благодаря такому коду видео будет воспроизводиться в любых браузерах, а если в каких-то и не откроется, тогда сработает последнее правило и видео откроется с помощью flash-проигрывателя.

Могут возникнуть проблемы с MIM-типами. MIM-типы — часть значения атрибута type у тега source. Но добавление атрибута type не является достаточным, вы также должны убедиться, что ваш веб-сервер включает в HTTP-заголовок Content-Type соответствующий MIME-тип.

Если вы применяете веб-сервер Apache или его производные, то можете использовать директиву AddType в httpd.conf или файле htaccess расположенный в той директории, где вы храните ваши видеофайлы. Если вы используете другой веб-сервер, обратитесь к документации вашего сервера о том, как установить HTTP-заголовок Content-Type для определенных типов файлов.

Добавьте в свой файл htaccess в корне сайта такие правила:

AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm

Первая строка предназначена для видео в контейнере Ogg. Вторая строка для видео в контейнере MPEG-4. Третья для WebM. Установите это один раз и забудьте.

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

Вот так выглядит прогрыватель видео в Firefox:

У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и…

На форуме Webmasters увидел интересное решение для того, чтобы увеличить скорость загрузки страниц на сайте,…

Делал для одного сайта выплывающие блоки при наведении на родительский элемент. В принципе, нет ничего…

Нашел на просторах сети интересную овальную кнопку, которая построена только на CSS3 без использования графических…

Источник: denis-creative.com

Размещение видео ВКонтакте на страницах своего сайта

Сегодня Интернет переживает БУМ личных сайтов и блогов, которые не безуспешно развиваются. собирая свою часть многомиллионной аудитории пользовательского внимания. Наполнение таких ресурсов очень разнообразно, и не коем образом не ограничивается текстовыми постами или личными фото подборками, одним из главных источников контента по праву можно считать видео… Именно видео ролики передают всю палитру информации одним потоком…

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

Ну начнём с того, что размещение видео файлов напрямую на хостинге своего сайта слишком расточительная возможность, а в некоторых случаях и вовсе недоступная (в связи с рядом условий хостинга или сервиса мульти-блога). Вот в таком случае приходят на помощь видео – хостинги, которые предоставляют услуги по публичному размещению ваших видео роликов. Ярким представителем этого направления Интернет является сайт YouTube.com

Загрузка видео на сайт Вконтакте

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

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

• Итак, откройте раздел сайта ВКонтакте — «Мои видеозаписи» (или раздел «Видеозаписи» в личном сообществе).
• Кликните по ссылке «Добавить видеролик», добавьте информацию о загружаемом файле , которая будет доступна для публичного просмотра пользователями сети (Название и описание видео).
  
• После кликаем по кнопке «Добавить видео» и переходим не посредственно к загрузке видео файла.
  
• Перед этим нам предлагают ознакомиться с правилами загрузки и условиями сайта, а только после этого нажимаем «Выбрать файл». В диалоговом окне двойным кликом укажите видео файл, который следует загрузить.
• Подождите некоторое время, пока процесс загрузки не будет полностью завершён. По окончанию видео автоматически откроется для просмотра.
  

Размещение видео на личном сайте

• Кликаем правой кнопкой мышки по видео – изображению и из контекста выбираем «Копировать код видео». После чего отправляемся на страничку публикации на сайте…
• Перейдите в редакторе страниц в режим «HTML» (Текст, Исходный код и т.п.) и вставьте ранее скопированный код из буфера обмена, либо кликом мышки, либо сочетанием клавиш Ctrl + V.
• У вас должен появиться, примерно, следующий код:
  
• Не нарушая тегов iframe, можно продолжить редактирование веб публикации. А для более точной геометрии отображения воспользуйтесь параметрами кода: height и width , задав высоту и ширину соответственно.

Вместо послесловия

Вот и всё, что касается размещения видео ВКонтакте на страницах своего сайта. Вставить видео из YouTube.com можно аналогичным способом, и единственным будет отличаться терминология и условия сайта.
Некоторые CMS имеют и вставку видео напрямую с использованием ссылки, что несколько облегчит процесс размещения HTML кода.

Источник: wd-x.ru

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

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

Ссылка

Указывается ссылка, которую можно скопировать из адресной строки с видеороликом. В данном случае используются технологии oEmbed. Поддерживаются сервисы Youtube.com, Rutube.ru, Vimeo.com, Dailymotion.com, Сoub.com.

• Скопируйте ссылку на видео. Например, если вам понравилось видео http://www.youtube.com/watch?v=blO3Yb8nZ18, то необходимо на данной странице видео нажать на кнопку «Поделиться» — вкладка «Поделиться». Будет выведена ссылка http://youtu.be/blO3Yb8nZ18 (ссылку http://www.youtube.com/watch?v=blO3Yb8nZ18 тоже можно использовать).
• Скопированную ссылку пропишите на вкладке «Добавить ссылку» — «Ссылка на видеоролик» (подробнее рассмотрим ниже).
• После прописывания ссылки подождите несколько секунд и пройдите авторизацию в Google, после этого данные будут получены.
• Выберите категорию видео, заполните дополнительные поля (если нужно), нажмите «Добавить видео». Теперь это видео доступно и на вашем сайте.

Код

Некоторые хостинги предлагают размещать видео на своих сайтах с помощью HTML-кодов плееров. В коде видеоролика можно указывать IFRAME-, EMBED-, SCRIPT-элементы. Однако в целях безопасности мы используем свою базу сервисов, которые можно использовать в данной вкладке.

Список доступных сервисов:

• youtube
• youtu
• rutube
• vkontakte
• bvkb
• player.vimeo
• video.mail
• video.yandex
• dailymotion
• pub.tvigle

Данная база пополняется. Предложить видеосервис, которого ещё нет у нас в базе, вы можете в теме http://forum.ucoz.ru/forum/54-41178-1.

Перейдите на страницу видео. Под плеером кликните «Код для блога» (или «HTML-код»). После этого вам будет выдан код. Например:

Полученный код пропишите в поле «Код для вставки видео» и заполните остальные поля.

Файл

Если у вас есть видеоролик, который вы хотите опубликовать на сайте, выбирайте этот вариант. Потребуется подключить аккаунт Youtube.

Чтобы пользователи могли загружать свои файлы через форму на сайте в панели управления («Видео» / «Настройки» / «Материалы») нужно включить опцию «Загрузка материалов на YouTube». Для добавления файла через панель управления включать эту опцию не требуется.

Все видео, которые вы будете загружать со своего компьютера, будут автоматически в данном сервисе (Youtube). Автоматически получаются данные:

• Код видеоролика
• Скриншот видеоролика
• Название видеоролика

Добавление видео через панель управления

В панели управления сайтом выберите модуль «Видео» из списка:

На открывшейся странице нажмите на кнопку «Добавить»:

Откроется окно выбора способа добавления видео (способы мы рассматривали выше):

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

• Категория. В зависимости от выбранного набора предустановленных категорий указывается категория для материала. Категория является обязательным для заполнения полем. Материал может относиться одновременно к нескольким категориям. Данная возможность активируется в настройках модуля опцией «Вхождение материала сразу в несколько категорий».
• Название материала. По умолчанию является текстом ссылки на добавляемое видео в каталоге и помещается в переменную $TITLE$. Является обязательным для заполнения полем.
• Описание материала. Отображается рядом со ссылкой на сайт. Для вывода описания в шаблоне используется переменная $BRIEF$. Является обязательным для заполнения полем.
• Канал. Каналы позволяют фильтровать видео. По умолчанию видео добавляется в канал пользователя. Данный способ добавления видео позволяет выбрать созданный ранее канал, который не является пользовательским.
• Скриншоты. Изображения, которые выводятся в списке видеозаписей, а также на странице видео.

• Год создания видео.
• Актеры. Список актеров через запятую. Выводится с помощью переменной $ACTERS$.
• Режиссер. Публикуется с помощью переменной $PRODUCER$.
• Автор. Произвольное имя и/или фамилия автора материала ($AUTHOR_NAME$).
• Email автора. Может быть показан на сайте с помощью переменных $AUTHOR_EMAIL$ и $AUTHOR_EMAIL_JS$. Во втором случае JavaScript препятствует копированию email-адреса роботами и скриптами, что снижает риск возникновения спам-писем по указанному адресу после добавления видео.
• Сайт автора. Ссылка на сайт автора материала. Будет опубликована на странице видео с помощью переменной $AUTHOR_SITE$.
• Длительность материала. Определяется автоматически, но может быть задана вручную. Публикуется на сайте с помощью переменной $DURATION$.
• Качество видеоматериала. Можно указать любое значение, но обычно используются общепринятые. Выводится с помощью переменной $VQUALITY$.
• Теги материала. Слова или словосочетания, которыми можно охарактеризовать сайт. Теги указываются через запятую и участвуют в поиске материалов на сайте. Указав значение тега в поиске, можно найти все материалы, содержащие данный тег. Переменная $TAGS$.
• Язык.
• Дополнительное поле 1. N. Подключить дополнительные поля можно в настройках модуля. Изменить названия — с помощью инструмента «Замена надписей».

• HTML-заголовок страницы. Используется в переменной $USER_TITLE$. Так могут быть выведены разные названия для видео на странице сайта и на вкладке браузера.
• Meta description. Явно заданное meta-описание видео. Выводится с помощью .
• Использовать ЧПУ (человеко-понятный-урл). Часть ссылки на страницу видео.

• Комментирование. Включает/отключает возможность оставлять комментарии к видео.
• Материал недоступен для просмотра (премодерация). Включает/отключает возможность просмотра материала пользователями. При включении данной опции материал после добавления неактивен (скрыт).

Поля со значениями фильтров появляются после создания фильтров. В нашем примере выше создан фильтр (Год) с множественным выбором.

Когда закончите заполнять все поля материала, нажмите на кнопку «Добавить», и видео появится в списке:

Добавление видео через панель инструментов

Панель инструментов содержит раздел, который позволяет быстро переходить к добавлению видеоматериалов на сайт. Нажмите на иконку «+» и выберите модуль, в который хотите добавить материал:

Откроется страница добавления видео:

Выберите способ добавления видео (способы мы рассматривали ранее). Для внесения данных о видео нажмите на ссылку «Дополнительно»:

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

Если нажать на логин пользователя, появится окно с настройками канала:

Можно изменить название и описание канала, а также прикрепить скриншот к каналу. Страница канала позволяет оставлять комментарии. Для этого нужно активировать настройку «Позволить оставлять комментарии». Чтобы узнать больше о каналах, читайте инструкцию.

Нажмите на кнопку «Добавить видео», и новый материал будет добавлен на сайт.

Чтобы изменить состав полей при добавлении видео, зайдите в настройки модуля «Видео» и в разделе «Материалы» добейтесь желаемого результата:

Добавление видео с главной страницы модуля

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

Чтобы ссылка появилась в шаблоне, добавьте в него следующий код:

При переходе по этой ссылке откроется страница добавления видео.

Источник: www.ucoz.ru