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

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

дополнительные материалы к урокам демо версия урока

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

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

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

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

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

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Вставка видео на сайт</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Вставка видео на сайт</h1> <h2>1 Способ: Вставляем видео при помощи сервиса Youtube</h2> <h2>2 Способ: Вставляем видео при помощи плеера</h2> <h2>3 Способ: Вставляем видео при помощи тегов HTML5</h2> </body> </html>

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

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

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

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

html5-файл для вставки видео

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

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

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

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

вставка видео через сервис Youtube

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

выбор видео файла для загрузки

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

загрузка файла на youtube

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

ссылка на видео

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

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

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

код с сервиса youtube

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

<h2>1 Способ: Вставляем видео при помощи сервиса Youtube</h2> <iframe width="560" height="315" src="//www.youtube.com/embed/FkX88N4pCow?rel=0" frameborder="0" allowfullscreen></iframe>

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

вставить видео на сайт через сервис youtube

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

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

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

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

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

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

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

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

<script type="text/javascript" src="flowplay/flowplayer-3.2.2.min.js"></script>

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

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

<h2>2 Способ: Вставляем видео при помощи плеера</h2> <div align="center"> <a href="video/mult.mp4" style="display: block; width: 560px; height: 315px;" id="player"></a> <script type="text/javascript"> flowplayer("player", "http://ваш сайт/путь/к/файлу/flowplay/flowplayer-3.2.2.swf", { clip: { autoPlay: false, autoBuffering: true } }); </script> </div>

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

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

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

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

видео, загруженное на сайт при помощи FlowPlayer

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

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

<video src="video/mult.mp4" controls></video>

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

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

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

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

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

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

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

<video controls> <source src="video/mult.mp4" type="video/mp4"> <source src="video/mult.ogv" type="video/ogg"> </video>

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

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

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

<video controls> <source src="video/mult.mp4" type="video/mp4"> <source src="video/mult.ogv" type="video/ogg"> <iframe width="560" height="315" src="//www.youtube.com/embed/FkX88N4pCow?rel=0" frameborder="0" allowfullscreen></iframe> </video>

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

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

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

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

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

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

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

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

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

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

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


Не нашли того, что искали? Воспользуйтесь расширенным поиском!

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

rss podpiska

Введите Ваш E-mail:


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

Комментарий добавил(а): Вячеслав
Дата: 2014-07-06

Благодарю Вас за подробную статью, очень помогло в создании странички.

Комментарий добавил(а): Саша
Дата: 2014-07-07

Спасибо! Написано грамотно, красиво и содержательно.

Комментарий добавил(а): Ирина
Дата: 2014-07-11

Спасибо большое. Информация актуальна.

Комментарий добавил(а): Андрей
Дата: 2014-07-25

Большое спасибо!

Комментарий добавил(а): Пехота
Дата: 2014-07-26

В строkе flowplayer("player", "http://ваш сайт/путь/к/файлу/flowplay/flowplayer-3.2.2.swf", { в XHTML, по опытy 3наю, не нyжно yk3ывать пyть k фаилy. Должно выgлядеть таk - flowplayer("player", "http://henaro.vindetta.net/flowplay/flowplayer-3.2.2.swf

Комментарий добавил(а): Maiami
Дата: 2014-07-30

Не добавляет видео с youtube. Пишет "Не удалось найти файл или каталог". Что можно подправить?

Комментарий добавил(а): Эдвард
Дата: 2014-09-16

И у меня тоже пишет что фаил или каталог найти не может, подскажите пожалуйста в чём проблема

Комментарий добавил(а): Анатолий
Дата: 2014-09-21

Анечка, большое спасибо! Очень нужная и доступная информация!

Комментарий добавил(а): Мукасей
Дата: 2014-10-26

Всё правильно и подробно, но сейчас есть возможность делать это гораздо проще. https://www.youtube.com/watch?v=IxO1XDSkIQQ

Комментарий добавил(а): Алик
Дата: 2014-11-06

Спасибо, в будущем пригодиться

Комментарий добавил(а): Евгений
Дата: 2014-11-18

СПАСИБО

Комментарий добавил(а): WWW
Дата: 2014-11-20

вставляется комментарий

Комментарий добавил(а): WWW
Дата: 2014-11-20

Злобный тролль говорит "СПАСИБКИ"

Комментарий добавил(а): Павел
Дата: 2014-11-25

Уже 4 часа мучаюсь. ничего не работает. аж псих берет

Комментарий добавил(а): ильшат
Дата: 2014-12-01

хочу выложить ведиоролик

Комментарий добавил(а): Serg
Дата: 2014-12-03

У меня плеер работает, но есть одна неувязка.Видео воспроизводится толькл если файл находится либо в той же папке что и html файл, либо в папке "ниже" иерархии, а если папка находится выше иерархически чем html файл, тогда плеер не находит видеофайл. Как правильно прописать путь к видео, если оно находится в папке выше по директории чем html файл? Очень жду ответа!!!

Комментарий добавил(а): xtkjdtr
Дата: 2014-12-23

говно ебаное ничего не пашет 4 часа зря потерял нахуй... :(

Комментарий добавил(а): Oleg
Дата: 2014-12-28

Все отлично работает! Спасибо огромное! Тестил ранее uppod.swf и SmartVideoPages.com - считаю Ваш вариант имхо более удобным.

Комментарий добавил(а): Роман
Дата: 2015-01-18

Спасибо, статья очень помогла!:)

Комментарий добавил(а): Денис
Дата: 2015-02-07

FlowPlayer отлично работает! Спасибо! Доказательство на програм.рф

Комментарий добавил(а): Cristy
Дата: 2015-02-18

Большое спасибо, все получилось! Буду продолжать изучать ваши полезные статьи!

Комментарий добавил(а): test
Дата: 2015-03-06

<script>alert("test")</script>

Комментарий добавил(а): Аружан
Дата: 2015-03-08

Как ограничить видео в рамочки

Комментарий добавил(а): qwerty
Дата: 2015-03-13

Спасибо!

Комментарий добавил(а): Эльвина
Дата: 2015-03-13

Большое вам спасибо, ваша статья очень помогла мне!

Комментарий добавил(а): cupoma58
Дата: 2015-03-14

как быть с просмотром 3gp-файла?

Комментарий добавил(а): орглур
Дата: 2015-04-16

спосибо

Комментарий добавил(а): cupoma58
Дата: 2015-04-18

после привязки js.min и вставки кода - ничего не возникло...

Комментарий добавил(а): Катя
Дата: 2015-04-23

Большое спасибо за статью, очень помогла

Комментарий добавил(а): Алекс
Дата: 2015-05-01

Большое спасибо за статью. Легкая в восприятии и понимании. Ваша статья мне очень помогла))

Комментарий добавил(а): Азизжан
Дата: 2015-05-15

Большое спасибо! Очень приятная и грамотно оформленная статья :)

Комментарий добавил(а): Валентин
Дата: 2015-05-25

Почему у меня не воспроизводит видео,сам плеер грузится.

Комментарий добавил(а): Владимир
Дата: 2015-09-06

Признателен за статью! Не являясь профессионалом быстро понял. Все получилось!!!!

Комментарий добавил(а): Алексей
Дата: 2015-10-05

Спасибо, все получилось!

Комментарий добавил(а): Олег
Дата: 2015-10-16

Спасибо!

Комментарий добавил(а): Оксана
Дата: 2015-11-01

Спасибо! Особенно понравился третий способ вставки видео. Проще уже некуда.

Комментарий добавил(а): Алекс
Дата: 2015-11-21

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

Комментарий добавил(а): Алексей
Дата: 2015-12-02

Спасибо, статья очень полезная!

Комментарий добавил(а): Анастасия
Дата: 2016-01-06

Спасибо! Очень помогла эта статья!

Комментарий добавил(а): Сежик
Дата: 2016-01-11

Спасибо за информацию! http://www.socseti4you.ru/2016/01/kak-dobavit-video-na-youtube.html

Комментарий добавил(а): Fredi
Дата: 2016-01-16

Спасибо большое за статью. Очень пригодилась...

Комментарий добавил(а): Серж
Дата: 2016-01-18

Спасибо за полезную информацию. http://www.socseti4you.ru/2016/01/kak-vstavit-youtube-video-na-sajt.html

Комментарий добавил(а): Сергей
Дата: 2016-01-27

Ничего не получается. Где-то автор о чем то умалчивает специально наверное

Комментарий добавил(а): Алексей
Дата: 2016-02-20

Добрый день, а как указать видео, которое находится на жестком диске, например по пути E:Test.mp4

Комментарий добавил(а): Ильдус
Дата: 2016-03-11

Здравствуйте,а как добавить фото на сайт с облака майл. вида https://cloud.mail.ru/public... никак не хочет показываться. Только разорванная картинка.

Комментарий добавил(а): Ликсеич
Дата: 2016-03-20

Просто спасибо :) -- ...и счастья в личной жизни !)

Комментарий добавил(а): STAS
Дата: 2016-03-29

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

Комментарий добавил(а): алексей
Дата: 2016-04-18

Как задать параметры ширины и высоты к видио скачанном с компьютера я пытался <video controls> <source src="Тор.avi" width="320" height="240" type="video/mp4"> </video> не пулучается

Комментарий добавил(а): Виктория
Дата: 2016-04-18

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

Комментарий добавил(а): Виктория
Дата: 2016-04-18

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

Комментарий добавил(а): Виталий
Дата: 2016-05-23

Спасибо большое за обучалочку!!! Подскажите, когда я вставляю видеоролик третьим способом (при помощи скрипта плеера) - все работает, но сам экран видеоплеера черный. А у вас на экране перед запуском видео видна превьюшка. Что нужно для этого сделать?

Комментарий добавил(а): Arman
Дата: 2016-07-24

Спасибо большое, действительно всё работает!

Комментарий добавил(а): Вячеслав
Дата: 2016-09-07

Здравствуйте. Подскажите как разместить на сайте (Wordpress) 3d видео презентацию. Полученная мною презентация не имеет конкретного видео, а состоит из кучи фото и других файлов. На комьпютаре включается при помощи какого то плэера, как всё это разместить на сайт? Можно ли это сделать при помощи FlowPlayer, если да то можно поподробнее куда вставлять строку <script type="text/javascript" src="flowplay/flowplayer-3.2.2.min.js"></script>

Комментарий добавил(а): Autozigulya.ru
Дата: 2016-10-05

Замечательно!

Комментарий добавил(а): Григорий
Дата: 2016-10-22

Спасибо. Для новичка, это важная инфа для меня. Однако, есть вопрос. Когда я подгружаю видео с файла в папке компа, то у меня панель управления "Пуск - пауза - Громкость" выскакивают отдельным блоком внизу видеоролика. А значёк "Пуск" в белом кружке я никак не могу установить в середину ролика. Если убрать "controls", то панель пропадаэ ваще. А так,ещё раз спасибо.

Комментарий добавил(а): Halk
Дата: 2016-11-14

Можно добавить видео на сайт http://videozaraza.ru/ по ссылке ютуб. Для этого нужно авторизоваться. Вот ссылка на статью http://videozaraza.ru/blog/8- описание внизу.

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


Введите сумму чисел с картинки:

Почему стоит подписаться на обновления блога

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

rss podpiska

Введите Ваш E-mail: