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

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

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

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

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

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

Через фреймы

С помощью тега video, который появился в html5

С помощью скриптов

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

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

<iframe width = "" height = "" src = "" frameborder = "0" allowfullscreen></iframe>

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

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

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

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

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

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

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

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

<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>

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

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

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

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

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

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

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

<a href="bootstrap.mp4" id="js-player"></a>
<script type="text/javascript">
    flowplayer("player", {src : "http://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 – важный атрибут, в нем указывается путь к странице, где можно скачать нужный плагин для того, чтобы браузер мог понять и прочитать данные.

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

HTML5 и CSS3 с Нуля до Профи

Научись верстать сайты, используя все возможности HTML5 и CSS3, прямо сейчас

Научиться

Метки:

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree