От автора: приветствую всех читателей webformyself. В прошлой статье мы рассматривали установку счетчика, а сегодня я вам покажу, как разместить видео на сайте двумя способами и какие у каждого особенности.
Вставка видео на сайт
Мы с вами живем в период, когда на веб-странице помимо текста и изображений могут присутствовать и другие элементы. В частности, видео. Хорошо сделанный ролик по теме увеличит ранг страницы и позволит пользователям дольше оставаться на вашем сайте. В общем, это достаточно полезный ход.
Как я уже и говорил в начале, существует два способа вставки, которые сегодня можно использовать:
Через фреймы
С помощью тега video, который появился в html5

JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееС помощью скриптов
Как разместить видео с Youtube на сайте?
Это очень просто. Идете на ютуб и находите там тот ролик, которое вам нужно вставить к себе на страницу. Под ним есть пару кнопок. В частности, кнопка “Поделиться”. Здесь выбираем пункт html-код и ютуб покажет нам код, который надо вставить у себя в статье, чтобы видео вывелось в ней. Код имеет такое строение:
1 |
<iframe width = "" height = "" src = "" frameborder = "0" allowfullscreen></iframe> |
Давайте вы нем немного разберемся, чтобы понимать, как он работает. Атрибуты width и height указывают ширину и высоту нашего контейнера, вы можете выставить их по дизайну вашего сайта. Пустой атрибут allowfullscreen разрешает расширять содержимое на весь экран, пользователи часто это делают и не нужно им запрещать это.
Frameborder – это рамка фрейма, но она нам ни к чему. Вы можете задать ее самостоятельно через css. Наконец, самый важный параметр – src. Он указывает путь к видео на youtube. //www.youtube.com/embed/уникальный id видео.
Таким образом, вам достаточно знать адрес конкретного ролика и можно его самостоятельно скопировать и вписать в код.
В данном случае id видео это то, что идет после watch?v=.
Итак, с этим способом все понятно, никаких проблем у вас возникнуть не должно. Но если вы ставите не свое видео, то со временем оно может быть удалено или перемещено и на вашем сайте будет указано, что оно недоступно. Именно по этой причине лучше ставить свои видеоролики.
Вставка через html код
Наверняка многие из вас знают, что появилась новая версия языка разметки — html5, и она принесла с собой пару новых тегов и возможностей. Кстати, подробно об этом вы можете посмотреть в нашем курсе по этой технологии.
Так вот, там появился также тег video и он позволяет вставить видеоролик на сайт без каких-либо скриптов, а также воспроизвести его через встроенный плеер. Это делается вот таким кодом:
1 2 3 4 5 |
<video controls> <source src="dir/film.mp4" type="video/mp4"> <source src="dir/film.ogv" type="video/ogg"> <source src="dir/film.webm" type="video/webm"> </video> |

JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееОдинарные теги source показывает браузеру путь к файлам и их MIME-тип для правильной интерпретации. Как видите, для работы во всех браузерах нам понадобится один и тот же файл в трех форматах. Сконвертировать можете в любом толковом конвертере или в онлайн-сервисе. Например, online-convert.com.
Отлично, если путь указан верно и все форматы заданы, видео выведется. Если не все форматы указаны, то оно появиться только в тех браузерах, где поддерживается формат. Атрибут controls позволяет вывести элементы управления роликом, чтобы иметь возможность останавливать его, изменять звук и т.д. Это нужно почти всегда, поэтому атрибут просто необходим для удобства пользователя.
Другие способы вставки
Однако кроме этих вариантов есть и другие. Например, вы можете скачать скрипт, который будет выводить плеер. Один из самых популярных – FlowPlayer. Его нужно скачать, распаковать на ваш сайт, прописать путь к скрипту в html-файле и вставить само видео с помощью функции. Руководство по использованию плеера можно найти в документации к нему.
Пример вставки видео через flowplayer. Первым делом нужно подключить скрипт в head:
1 |
<script type="text/javascript" src="flowplay/flowplayer-3.2.2.min.js"></script> |
Далее в body там, где нужно вывести ролик, нужно написать примерно следующее:
1 2 3 4 |
<a href="bootstrap.mp4" id="js-player"></a> <script type="text/javascript"> flowplayer("player", {src : "//url_вашего_ресурса/flowplayer/flowplayer-3.2.2.swf", wmode: "transparent"}); </script> |
Для работоспособности всего этого дела:
Укажите правильные пути к файлам
Обратитесь к ссылке с id = “js-player”, в которую вставлено наше видео, и напишите ей пару css-стилей. Например, сделайте ее блочной для корректного отображения и добавьте оформление, если это необходимо. Самое главное, задайте высоту и ширину.
Ну а раньше в html видео часто вставляли через тег object, указывая в нем путь к нужному плагину, который мог бы распознать видео и воспроизвести его. В html5 его использование осуждается.
Тег object во многом похож на video, ведь в нем тоже используются одинарные теги, а именно param. В них прописываются различные настройки. Другой тег, с помощью которого можно вставить медиафайлы – embed.
Если выбирать между ними, то для современных браузеров лучше использовать embed. Для этого тега нужно указать такие атрибуты, как:
Width и height – тут все понятно, это размеры;
Src –путь к видео, которое нужно отобразить ;
Type — MIME-тип содержимого;
Pluginspage – важный атрибут, в нем указывается путь к странице, где можно скачать нужный плагин для того, чтобы браузер мог понять и прочитать данные.
Что ж, сегодня мы с вами рассмотрели достаточно много способов вставить медиафайл на страницу, так что у вас достаточно много вариантов, как действовать. Надеюсь, эта статья была для вас полезной и прощаюсь с вами, но ненадолго.

JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнее