Как разместить (загрузить) видео-ролик на сайт? Как выложить видео на сайт


Как вставить видео ролик на сайт (3 способа)

Как вставить видео ролик на сайт (3 способа)

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

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

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

Есть несколько способов сделать это. Сегодня мы рассмотрим 3 разных способа, которые помогут Вам справиться с этой задачей. Какой из них выбрать – решать Вам. Итак, поехали…

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

Итак, код html-файла:

1 Способ: Вставляем видео при помощи сервиса Youtube

2 Способ: Вставляем видео при помощи плеера

3 Способ: Вставляем видео при помощи тегов HTML5

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

Я также прописала некоторые стили для этой странички. Они хранятся в файле «style.css», который лежит в том же каталоге, что и html-файл. Содержимое файла «style.css» выглядит следующим образом:

body{width:90%; margin:0 auto; text-align:center} h2{font-family:Verdana, Geneva, sans-serif; color:#066} h3{font-style:italic; border-bottom:thin solid #F33; color:#F33}

Если открыть наш html-файл в браузере, то сейчас он будет выглядеть так:

Подготовка закончена, давайте перейдем к самой вставке видео на веб страницу.

Первый способ, который мы рассмотрим – это вставка видео при помощи сервиса Youtube.

1. Первое что нам нужно – это иметь какой-то видео-ролик, который мы хотим вставить. Допустим, что он у нас есть и хранится на нашем локальном компьютере.

Теперь переходим на сайт www.youtube.com. Здесь нам нужно нажать на кнопку «Войти», расположенную в верхнем правом углу. После этого нужно произвести вход при помощи Вашего аккаунта Google. Если вдруг у Вас его еще нет, то сначала нужно его завести.

2. После того, как Вы вошли в сервис под своим аккаунтом, нажмите на кнопку «Добавить видео». Сервис предложит Вам выбрать файл для загрузки, и Вы можете выбрать нужный файл, который хранится у Вас на компьютере.

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

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

Когда Вы перейдете по данной ссылке, то увидите Ваше видео, размещённое на сервисе Youtube.

3. Теперь нам нужно получить код, для вставки видео на нашу веб страницу. Для этого сразу под видео щелкните по вкладке «Поделиться», а в ней по вкладке «HTML-код».

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

Когда Вы настроите все параметры, то можете скопировать код и вставить его в Ваш html-файл. Я вставлю код в файл под соответствующим заголовком следующим образом:

1 Способ: Вставляем видео при помощи сервиса Youtube

И теперь, если мы посмотрим работу нашего html-файла в браузере, то увидим, что видео вставилось и его можно просмотреть (посмотреть код в действии Вы можете нажав на иконку «Демо» в начале статьи).

Здесь, я думаю, все понятно. Давайте перейдем к следующему способу.

Вставляем видео при помощи скрипта плеера.

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

Итак, у Вас должен быть видеоролик, который Вы будете загружать. Допустим, что он хранится в какой-то папке на Вашем сайте. Я сохраню видеофайл в папке с именем «video».

Теперь нам нужен сам плеер. На данный момент существует множество бесплатных плееров, с помощью которых можно вставить видео на сайт. Давайте воспользуемся плеером Flowplayer. Это бесплатный видеоплеер для веб, который разработан специально для владельцев сайтов.

1. Скачайте файлы плеера себе на компьютер нажав вот на эту ссылку: FlowPlayer

2. После того, как Вы скачали файлы плеера на свой компьютер, нужно их разархивировать в какую-либо папку на Вашем сайте. Я создала папку «flowplay» и разархивировала файлы туда.

3. Теперь перейдем в html-файл и займемся кодом. Первое, что нам нужно сделать это подключить javascript-файл плеера к нашему html-файлу. Для этого внутри тега head, сразу после подключения таблицы стилей пропишите следующий код:

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

4. Теперь перейдем в тело нашего файла и разместим сам плеер с проигрываемым файлом. Я размещу его прямо под соответствующим заголовком, предварительно поместив в тег div, который выровняю по центру.

2 Способ: Вставляем видео при помощи плеера

Здесь Вам нужно будет проверить пути до файлов и прописать свои. Делая это будьте внимательны.

Также здесь выставлены настройки, которые не дают видео запускаться автоматически, однако разрешают его загрузку. Если Вы хотите, чтобы видео запускалось автоматически, то после пути к файлу «flowplayer-3.2.2.swf» следует убрать запятую, закрыть круглую скобку и поставить «;» (без кавычек), а все остальное, что находится после этого и до закрывающего тега «/script» удалить.

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

Имейте в виду, что видео, загружаемое плеером должно иметь формат .mp4 или .flv.

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

1. Найдите третий заголовок и прямо под ним пропишите следующий код:

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

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

Параметр «controls» добавляет панель управления для видео.

Если Вы хотите, чтобы Ваше видео воспроизводилось сразу после загрузки страницы, то нужно добавить параметр «autoplay».

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

Однако, здесь есть свои «подводные камни», например, разная поддержка браузерами разных форматов мультимедиа. Данный пример будет замечательно работать во всех новых браузерах, но не в браузере Опера. Чтобы этот код заработал в Опере мы должны конвертировать видео файл в формат «Ogg Theora» и немного поменять код, чтобы дать браузеру альтернативный выбор.

Конвертировать файл можно с помощью сервиса online-convert.com/ . После конвертации сохраните полученный файл в папку «video», а код для вставки видео поменяйте на следующий:

Теперь пример будет работать и в браузере Опера.

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

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

С таким кодом новые версии браузеров успешно обработают наш элемент «video», а если вдруг пользователь откроет страницу при помощи старого браузера, то незнакомый тег «video» будет проигнорирован, но тег «iframe» будет успешно обработан и видео подгрузится с Youtube.

Пожалуй, на этом буду заканчивать. Напоминаю, что все исходные материалы Вы можете скачать, щелкнув по иконке «Исходники» в начале статьи, а посмотреть работу всех трех примеров можно щелкнув по иконке «Демо» там же.

Оставляйте свои комментарии и делитесь этой статьей с друзьями при помощи кнопок социальных сетей. Буду Вам очень признательна.

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

Желаю Вам хорошего настроения и успехов в Вашей работе!

До новых встреч!

Создание базы данных MySQL

Эффектные заголовки на сайт без использования Photoshop

Как подключить любые шрифты для сайта

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

Будьте в курсе новых публикаций на Блоге!

Комментарии к этой статье:

Добавить Комментарий:

website-create.ru

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

В этой статье мы поговорим о том, как вставить видео на сайт и научимся:

  1. Размещать свои файлы на видео хостингах и отображать их на сайте.
  2. Загружать видео на свой хостинг и отображать их на сайте с помощью плеера.

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

Как загрузить видео на Youtube:

  1. Первым делом Вам необходимо войти в свой аккаунт YouTube.
  2. Нажмите кнопку Добавить видео в верхней части страницы.
  3. Выберите ролик для загрузки. (Учитывайте, что видео не должно нарушать авторские права. Если Вы хотите наложить на видео известную музыку, то придется ее купить).
  4. Пока файл загружается заполните основную информацию о ролике и при необходимости дополнительные параметры.
  5. Чтобы добавить видео на YouTube, нажмите Опубликовать.
  6. Пока вы не нажмете кнопку Опубликовать, видео доступно только вам.

С более подробной инструкцией по загрузке видео на Youtube можете ознакомиться на странице supporta

Вставить на сайт видео с Youtube:

Чтобы вставить уже загруженное (имеющееся) на Youtube видео:

  1. Откройте интересующее Вас видео на Youtube;
  2. Нажмите на находящуюся под видео кнопку «Поделиться»;
  3. Выберите вкладку «HTML» и скопируйте появившийся код; (Чтобы скопировать код быстрее: нажмите правой кнопкой мыши по видео и выберите пункт «Копировать HTML-код.)
  4. Вставьте скопированный код в нужную часть сайта.
  5. Сохраните изменения и обновите страницу.

Вставить на сайт видео с Vimeo:

  1. Откройте понравившееся на Vimeo Вам видео;
  2. Нажмите на находящуюся под видео кнопку «Share»;
  3. В появившимся окошке в пункте «Embed» скопируйте код;
  4. Вставьте скопированный код в нужную часть сайта.
  5. Сохраните изменения и обновите страницу.

Вставить на сайт видео с Rutube:

  1. Откройте нужное на RuTube Вам видео;
  2. Нажмите на находящуюся под видео кнопку «поделиться»;
  3. Выберите вкладку «Код вставки»
  4. Скопируйте появившийся код;
  5. Вставьте скопированный код в нужную часть сайта.
  6. Сохраните изменения и обновите страницу.

Вставить на сайт видео с VK (Вконтакте):

 

  1. Откройте видео; (Возможно понадобится авторизация).
  2. Нажмите на находящуюся под видео кнопку «Еще»;
  3. Выберите вкладку «Экспортировать»  в появившемся окне «Код для вставки» скопируйте появившийся код;
  4. Вставьте скопированный код в нужную часть сайта.
  5. Сохраните изменения и обновите страницу.

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

Теперь рассмотрим варианты воспроизведения видео с загруженным видео на свой сервер.

Вставить видео на сайт с помощью HTML5

Для этого способа Вам понадобится тег video

<span>&lt;<span>video</span>&gt;</span> <span>&lt;<span>source</span><span> src=<span>"URL"</span></span>&gt;</span> <span>&lt;/<span>video</span>&gt;</span>

<span>&lt;<span>video</span>&gt;</span>

<span>&lt;<span>source</span><span> src=<span>"URL"</span></span>&gt;</span>

<span>&lt;/<span>video</span>&gt;</span>

  1. Загружаем на сервер видео;
  2. Копируем вышеуказанный код;
  3. Вставляем в нужную нам часть сайта скопированный код;
  4. Изменяем URL на путь к файлу который мы разместили на хостинге
  5. Сохраняем изменения и обновляем страницу.

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

В первую очередь хотелось бы сказать о таких атрибутах как height (высота), width  (ширина).

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

  • src — это самый важный атрибут, он указывает путь к видеоролику.
  • autoplay — воспроизведение видео сразу после загрузки страницы.
  • loop — повтор воспроизведения видео по завершению
  • poster  — указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
  • preload — загрузка видео вместе с загрузкой веб-страницы.

Вставить видео на сайт с помощью плеера

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

  1. Скачайте плеер, а затем его разархивируйте;
  2. Создайте папку и поместите в нее файлы из архива;
  3. Подключите javascript-файл плеера к html-файлу. Для этого внутри тега head, пропишите следующий код:

    <script src="flowplayer.min.js"></script>

    <script src="flowplayer.min.js"></script>

    Будьте внимательнее прописывая путь к файлу. Вы можете не создавать папку, а положить файл скрипта в любую другую папку например в папку с другими скриптами.
  4. Теперь разместим сам плеер в коде страницы и соответственно видео файл.

     <!-- the player --> <div data-swf="flowplayer.swf" data-ratio="0.4167"> <video> <source type="video/webm" src="https://путь к вашему видео файлу если он в формате .webm"> <source type="video/mp4" src="https://путь к вашему видео файлу если он в формате .mp4"> </video> </div>

     <!-- the player -->

    <div data-swf="flowplayer.swf" data-ratio="0.4167">

    <video>

    <source type="video/webm" src="https://путь к вашему видео файлу если он в формате .webm">

    <source type="video/mp4" src="https://путь к вашему видео файлу если он в формате .mp4">

    </video>

    </div>

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

Как вставить код видео в html

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

Традиционно вид большинства html страниц выглядит примерно следующим образом:

<!doctype html> <head> Здесь подключаются скрипты и прочие файлы </head> <body> Это тело сайта здесь размещается основной код страницы </body>

<!doctype html>

<head>

Здесь подключаются скрипты и прочие файлы

</head>

<body>

Это тело сайта здесь размещается основной код страницы

</body>

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

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

Например один из них div.

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

<div align="center"> </div>

<div align="center">

</div>

Теме оформления блоков можно посвятить не одну статью. Но сейчас не об этом.

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

После сохраните изменения и обновите страницу для проверки.

Как вставить видео в статью WordPress

Чтобы разместить видео в статье или в странице wordpress достаточно перейти в режим «текст» и вставить код в нужную вам часть (здесь же вы можете изменять значения атрибутом, таких height, width) после перехода в режим «визуально» будет отображаться плеер.

На этом я заканчиваю статью надеюсь она была полезной для Вас.

mmechta.ru

Как разместить (загрузить) видео-ролик на сайт?

Разместить видео-ролик на своем сайте можно, воспользовавшись одним из трех способов: 

  1. Вставить видео-ролик с одного из широко известных видеохостингов типа YouTube.com, RuTube.ru, Яндекс.Видео, Vimeo.com и других
  2. Подключить модуль Файлы , в котором имеется встроенная поддержка проигрывания видео-роликов и mp3-трэков
  3. Подключить к сайту сторонний FLASH-плэер, например с сервиса http://flv-mp3.com/

 

Опишем подробнее все варианты:

 

1. Вставка видеоролика с видеохостинга

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

Преимущества данного приема в том, что все видеосервисы поддерживают загрузку видео любых форматов (mp4, avi, mpeg и других), а после загрузки переконвертируют (переоцифровывают) ваше видео в интернет-формат, поддерживаемый для проигрывания в вашем интернет-браузере. Это удобно и просто, поскольку вам не нужно заниматься самому переконвертацией видео в интернет-формат FLV

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

 

Полученный HTML-код ролика можно вставить на страницу сайта или в любой инфо-блок.

Если вы редактируете страницу своего сайта в HTML-редакторе,

то, нажав кнопку HTML в панели инструментов редактора, открывается окно с HTML-кодом страницы, внизу которой вы можете вставить полученный HTML-код ролика

 

После этого ваш ролик появится на странице сайта.

 

 

 

 

2. Вставка видеоролика, используя модуль Файлы

Подключив на своем сайте модуль Файлы, вы можете загружать в него MP3-файлы и видео в интернет-формате FLV. Загруженные видеоролики хранятся на вашем сайте и проигрываются во встроенном проигрывателе. 

 

 

3. Подключение стороннего FLASH-плэера

Этот способ наиболее подходит для опытных сайтостроителей, разбирающихся в технологии FLASH и HTML.  Воспользовавшись, например, сервисом http://flv-mp3.com/ можно собрать и настроить свой собственный проигрыватель, предварительно загрузив на сайт видеоролик в формате файла FLV. Загрузить сам ролик и FLV-плэер можно через HTML-редактор в редактировании любого контента сайта.  

help.ascont.ru

Как вставить видео на сайт с Youtube, Rutube, Vimeo, Вконтакте. Пошаговая инструкция добавления видео

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

Зачем видео на сайте?

Для начала разберем зачем вообще нужно видео на сайте. Сейчас с развитием технологий многие люди предпочитаю смотреть и слушать, а не читать, хороши ли это или плохо не нам решать, но размещение видео на сайте сыграет вам на руку. Вы можете снимать видеобращения к посетителям сайта, рассказывать и показывать ваши товары, проводить видеоуроки или различные демонстрации, а так же размещать видео, связанные с тематикой вашего сайта. Например, на днях я искал информацию по душевым кабинам, в поиске выдает множество страниц с текстом, и особняком стоит 1 видео, оно сразу выделяется в поиске и на него хочется кликнуть. А главное, оно реально полезное.

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

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

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

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

Когда видео находится в Интернете (неважно, было ли оно там, или вы сами только что его туда добавили), вам нужно получить его код. Мы вам покажем как этот код добывается на примере Youtube, rutube, vimeo и Вконтакте, отличия здесь минимальны.

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

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

В Youtube это делается следующим образом:

  • Под каждым видео есть кнопка «Поделиться», нажмите ее;
  • Выберите пункт «HTML-код»;
  • Выберите нужный размер для видео;
  • Скопируйте код и разместите его на странице вашего сайта.

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

Rutube – российский аналог youtube, так же позволяет размещать, хранить, смотреть и делиться видео. По данным администрации ресурс ежедневно посещают 15 миллионов пользователей. Здесь имеют свои каналы популярные ТВ-каналы, такие как Первый канал, Россия 2, ТНТ, СТС, Пятница, НТВ и многие другие, а так же отечтественные сериалы и передачи.

В Rutube это делается следующим образом:

  • Под каждым видео есть кнопка «код вставки», нажмите ее;
  • Скопируйте код.

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

Vimeo – это бесплатный видеохостинг, на котором можно так же выкладывать видео (до 500кб в неделю бесплатно, с платным аккаунтом до 20гб), смотреть, комментировать, лайкать и делиться ими со своими друзьями, положительным моментом является отсутствие рекламы. К сожалению пока нет русскоязычной версии,интерфейс доступен на: английском, испанском, французском, немецком и японском. Видео здесь делятся на категории: мода, музыка, искусство, анимация, юмор, еда и т.п., так что без труда можно поискать видео на интересующую тематику. Ресурс обладает современным дизайном и функционалом, особенно популярен среди молодежи.

В Vimeo это делается следующим образом:

  • Поднесите мышку к видеоплееру;
  • В верхем правом углу появятся 3 кнопки, нажмите «Share»;

  • В появившемся окошке скопируйте код «Embed».

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

Вконтакте – наша отечественная социальная сеть, которая позволяет добавлять и хранить видео, а так же смотреть, делиться, комментировать, в общем все в правилах жанра.

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

1. Включите видеопроигрыватель, правой кнопкой мышки нажмите на видео и из выпадающего списка выберите «копировать html-код».

2. Под каждым видео есть кнопка «Поделиться», нажмите ее. 

3. В появившемся окошке нажмите на вкладку «экспортировать» и скопируйте код для вставки.

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

Рассмотрим размещение видео на примере конструктора сайтов Nubex.

1. Зайдите в админку сайта и откройте редактирование той страницы, на которую хотите поместить видео (или создайте новую страницу). В поле для вставки текста нажмите кнопку «Источник».

2. У вас откроется HTML-код страницы. Найдите место в тексте, в которое хотите поместить видеоролик, и вставьте туда тот код, который вы скопировали из YouTube (или с другого сайта, на котором вы разместили видео).

3. Сохраните страницу, нажав на кнопку внизу.

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

Поздравляем! Вы смогли добавить видео на сайт самостоятельно. Надеемся посетителям вашего сайта оно понравится. 

nubex.ru

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

Существует несколько способов, как добавить видео на сайт. Это улучшит качество контента, сделает материал более визуализированным и привлечет большее количество пользователей. Давайте рассмотрим основные способы того, как выложить видео на своем сайте.

Видео со специализированного ресурса

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

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

Видео через плагины для CMS

Каждая CMS предлагает свои плагины для размещения видео. В качестве примера мы рассмотрим WordPress. Для этой CMS можно использовать плагин TubePress. Подробности работы с данным плагином вы сможете найти на сайте автора: tubepress.com. Там же можно разгрузить плагин, в том числе, и бесплатную версию.

Другой пример CMS - Joomla. Для нее можно использовать плагин allvideos. С его помощью также можно легко разместить видеоматериалы на своем сайте.

Видео с собственного хостинга

Можно не пользоваться сторонними ресурсами и загрузить видео на собственный сервер. Необходимо учесть размер видео, чтобы пользователь смог воспроизвести видео при своей скорости интернета. К тому же следует перекодировать ролик в общепринятый кодек. И наконец, вам потребуется видеопроигрыватель, например, Flowplayer.

Html-код будет содержать теги <script> и <a href>. Все атрибуты и параметры вы должны будете выставить самостоятельно.

Таким образом, можно заметить, что вста

elhow.ru

Как загрузить видео в Интернет

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

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

Как выложить видео в Интернет:список лучших видеохостингов

Куда загрузить видео для достижения максимального количества просмотров?

СайтОграничение по размеру и длительности видеоПоддерживаемые форматы
Youtube
Неоспоримый лидер! Загружайте видео на сайт, смотрите, постите, отправляйте на e-mail, комментируйте, подписывайтесь, привлекайте подписчиков на свой канал. YouTube снял ограничение на длительность видео более 15 минут – теперь для загрузки видео нужно лишь подтвердить активность аккаунта с помощью телефона. Единственный минус – нельзя скачивать ролики.Нет ограниченийMOV, MPEG-4, AVI, WMV, MPEG PS, FLV, 3GP, WebM
Rutube
Второй по популярности хостинг. Подписывайтесь на понравившиеся каналы, следите за рейтингами, участвуйте в конкурсах. Расшарьте видео и смотрите, как растет его рейтинг!50 минут, 10 ГБFLV, WMV, MOV, QT, MPEG-1,2, DivX, Xvid , 3GP, MP4, FLV
Яндекс.Видео
Помимо удобного поиска по всем видеохостингам интернета Яндекс.Видео предлагает пользователям выкладывать видео на сайт, создавать коллекции и добавлять понравившееся видео в раздел «Мои любимые ролики».750 МБВсе популярные форматы
smotri.com
Хостинг предоставляет возможность загружать видео и создавать онлайн-трансляции, а также оставлять комментарии к роликам.1024 МБ, 180 минут/месяцВсе форматы
Ustream
Создавайте собственные каналы и ведите онлайн-трансляции: разрешение для бесплатного аккаунта – 480p, для вещания в HD используйте аккаунты «Серебро», «Золото» и «Платина».Хранилище – 10 ГБПрактически все
Tvigle
Зарегистрируйтесь на этом видео-сайте и загружайте видео, фото и слайд-шоу, ведите блог, пишите комментарии, добавляйте видео в закладки и сохраняйте историю просмотров. Если у вас есть свой сайт или блог, вы также можете стать партнером Tvigle – это совсем не сложно.1024 МБ, 180 минут/месяцВсе форматы
Видео@mail.ru
Видео@mail.ru – сайт для загрузки видео, где можно выкладывать свои видео и смотреть ролики друзей.Хранилище – 10 ГБПрактически все

Где можно поделиться одновременно фотографиями и роликами?

СайтОграничение по размеру и длительности видеоПоддерживаемые форматы
flickr.com
Делитесь фотографиями и видеороликами с другими пользователями сети. Для регистрации понадобится почта @yahoo.com.1 ТБAVI ,WMV, MOV, MPEG-1,2,4, 3GP, M2TS, OGG, OGV
photobucket.com
Хранилище бесплатного аккаунта photobucket.com – 2 ГБ. Удобная навигация на сайте позволит вам без труда просмотреть последние загруженные файлы, создать альбом или найти пользователей со схожими интересами.2 ГБВозможность конвертации на сайте в любой формат

Куда залить видео для получения максимальной прибыли?

СайтОграничение по размеру и длительности видеоПоддерживаемые форматы
Vimeo
Приобретайте аккаунт «Pro» и самостоятельно устанавливайте цену за просмотр вашего контента.500 МБ в неделюПрактически все
blip.tv
Сайт предлагает стандартные и Pro-аккаунты (96$/год). Правила просты – вы получаете 50% дохода от вашего контента. Помните о специфике видео – материалы должны быть серийными, формата веб-шоу.1 ГБПрактически все
Brightcove
Brightcove – быстро развивающаяся сеть телевещания, обмена видеофайлами и монетизации различного видеоконтента. Используются Pre-, Mid-, Post-ролики, всплывающие баннеры и другое.Нет ограниченийFLV, WMV, 3GP, 3G2, DV, MOV, QT, MPG, MPEG, MP4, AVI, ASF

Хостингов, на которые можно выложить видео, очень много: сайты без регистрации, поддерживающие все форматы, бесплатные, без ограничений – на любой вкус. Выбирайте сайт, который подходит именно вам.

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

www.movavi.ru

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

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

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

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

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

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

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

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

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

И сегодня на конкретном примере рассмотри как вставить видео к себе на сайт.

Для начала, регистрируемся в аккаунте Youtube.

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

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

Рекомендую, загружать видео в свой аккаунт Youtube. Не вставляйте чужое видео, вернее с другого аккаунта. Через определенное время хозяин видео удалит его, и у вас ролик не будет отображаться на сайте. Поэтому не поленитесь и скачайте видеоролик приглянувшийся вам и загрузите его на хостинг. Но  а может вы будете вставлять свое собственное видео? Это еще лучше. Но всегда вставляйте ролики с видео-хостинга только со своего аккаунта. Есть гарантия, что видео не удалиться.

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

Переходим на страницу просмотра самого видео, в низу есть кнопка поделиться. На картинке показано где и как расположена эта кнопка.

Нажимаем, и далее видим вот такую вот картину:

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

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

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

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

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

А если вы хотите записать свое видео с экрана монитора и выложить на сайт почитайте, как создаются такие записи в статье «Как записать видео с экрана компьютера + видеоурок».

Как вы видите, вставить видео на сайт не сложно. Прочитав мою статью, вы теперь знаете как вставить видео на сайт. Пользуйтесь информацией на здоровье.

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

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

 С уважением,  Сергей Иванов

creationsait.ru