Главная / Информатика / Как закинуть видео на сайт.

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

Как закинуть видео на сайт.
  • Информатика
Описание:
Как вставить видео ролик на сайт (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-файл в браузере, то сейчас он будет выглядеть так: 



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

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

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

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



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



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



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



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

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

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



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

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

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



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

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

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

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



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








Автор Юсупов Зиявдин Абдулкеримович
Дата добавления 05.01.2015
Раздел Информатика
Подраздел
Просмотров 670
Номер материала 31929
Скачать свидетельство о публикации

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

Введите символы, которые изображены на картинке:

Получить новый код
* Обязательные для заполнения.


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

↓ Показать еще коментарии ↓