Вставка видео на сайт — инструкция

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

Современные сайты состоят не только из текстов и изображений. Еще одной важнейшей составляющей современных интернет-порталов является видео.

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

Сегодня существует 3 основных способа вставки видео на сайт:

  • посредством фреймов;
  • при помощи тега video в html5;
  • при помощи скриптов.

Вставка фреймов

Для размещения видео с ютуб на своем сайте необходимо найти понравившийся ролик и нажать кнопку «Поделиться». Эта кнопка расположена сразу же под видеозаписью. Далее следует выбрать пункт html-код. На экране появится код, который просто нужно вставить на необходимой странице своего сайта. Код видео на ютуб выглядит следующим образом:

<iframe width = “” height = “” src = “” frameborder = “0” allowfullscreen></iframe>

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

Frameborder является рамкой фрейма. В данном она не нужна. Ее можно задать самостоятельно посредством css. Самым важным параметром в этом коде является src. Именно этот параметр указывает ссылку на ролик, который размещен на ютуб. Таким образом, для размещения YouTube-видео у себя на сайте достаточно знать его уникальный id, который идет сразу же после watch?v=:

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

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

Вставка html-кода видео

В версии языка разметки html 5 у разработчиков появилась возможность вставки видео посредством тега video. Этот способ позволяет вставить видеозапись, не используя скриптов. Более того, тег 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>

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

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

Для вывода элементов управления видеозаписью используется атрибут controls. Благодаря этому атрибуту у пользователей появится возможность остановить запись, сделать громче звук и т.д.

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

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

Ниже приведен пример вставки ролики посредством видеоплеера FlowPlayer. Сначала выполняется подключение скрипта в head:

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

После в «теле» страницы вставляется видеозапись в любом подходящем месте:

<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-стилей;
  • задать высоту и ширину видеоплеера.

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

По своим свойствам теги object и video очень похожи. Но современные браузеры лучше воспринимают именно video. Главное, не забыть прописать следующие атрибуты:

  • width/height;
  • src;
  • type (для указания MIME-типа видеоконтента);
  • pluginspage (для указания пути к странице с нужным плагином).

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



Теги:
0

Оставить своё мнение

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