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

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

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

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

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

Как разместить видео с Youtube на сайте?

Это очень просто. Идете на ютуб и находите там тот ролик, которое вам нужно вставить к себе на страницу. Под ним есть пару кнопок. В частности, кнопка “Поделиться”. Здесь выбираем пункт html-код и ютуб покажет нам код, который надо вставить у себя в статье, чтобы видео вывелось в ней. Код имеет такое строение:

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

Frameborder – это рамка фрейма, но она нам ни к чему. Вы можете задать ее самостоятельно через css. Наконец, самый важный параметр – src. Он указывает путь к видео на youtube. //www.youtube.com/embed/уникальный id видео.

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

В данном случае id видео это то, что идет после watch?v=.

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

Вставка через html код

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

Так вот, там появился также тег video и он позволяет вставить видеоролик на сайт без каких-либо скриптов, а также воспроизвести его через встроенный плеер. Это делается вот таким кодом:

Одинарные теги source показывает браузеру путь к файлам и их MIME-тип для правильной интерпретации. Как видите, для работы во всех браузерах нам понадобится один и тот же файл в трех форматах. Сконвертировать можете в любом толковом конвертере или в онлайн-сервисе. Например, online-convert.com.

Отлично, если путь указан верно и все форматы заданы, видео выведется. Если не все форматы указаны, то оно появиться только в тех браузерах, где поддерживается формат. Атрибут controls позволяет вывести элементы управления роликом, чтобы иметь возможность останавливать его, изменять звук и т.д. Это нужно почти всегда, поэтому атрибут просто необходим для удобства пользователя.

Другие способы вставки

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

Пример вставки видео через flowplayer. Первым делом нужно подключить скрипт в head:

Далее в body там, где нужно вывести ролик, нужно написать примерно следующее:

Для работоспособности всего этого дела:

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

Тег object во многом похож на video, ведь в нем тоже используются одинарные теги, а именно param. В них прописываются различные настройки. Другой тег, с помощью которого можно вставить медиафайлы – embed.

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

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

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