Как вставить видео на сайт — подробная инструкция

Как вставить видео на сайт — этот вопрос мне довольно часто задают начинающие вебмастера, читатели моего блога, а также мои ученики, прошедшие обучение по курсу «Скринкаст мастер», посвященного созданию видеоуроков через запись с экрана компьютера. В принципе, задача несложная, если требуется, например, вставить видео youtube на сайт в единичном экземпляре в качестве иллюстрации к какой-либо статье — здесь можно использовать самый простой метод, предлагаемый самим видеохостером: скопировать и прописать сгенерированный код. А если у вас задача вставить 10 — 20 роликов? Или создать видеогалерею? Тут возникают сложности, которые будем решать в данной статье.

Видеогалерея - как на сайте разместить видео

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

Давайте все-таки сначала разберем самый стандартный способ, который подходит для всех сервисов видеохостингов. Каждый из них предоставляет код, который мы вставляем на страницу для отображения видео. Возьмем за основу YouTube. После загрузки ролика на странице просмотра будет такая кнопка — «Поделиться».

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

Появляется новая информационная панель, из которой нам нужна кнопка «Сгенерировать HTML код». Нажимаем ее, копируем код и вставляем на страницу сайта. Кроме того, чуть ниже можно задать свой размер отображаемого видео.

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

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

Как вставить видео на сайт через плагин?

Называется этот плагин, который поможет вставить видео на сайт, Video Embedder. Кроме известного ЮТуба он поддерживает еще несколько популярных сервисов, таких как Vimeo, Google Video, MySpace и других. Скачиваем его, устанавливаем и активируем. Теперь заходим в «Параметры > Video Embedder» и открываем страницу редактирования шоркодов. Суть работы плагина заключается в том, что вы в определенный шорткод, соответствующий одному их видеохостингов, вставляете ID ролика в данном сервисе. Здесь же в настройках можно задать ширину и высоту окна для вставки видео на сайт.





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

Теперь скопируем шорткод, который нам нужен, например ютубовский, и вставим в текст страницы из редактора

[youtube]video_id[/youtube]

После этого текст «Video_id» заменим на собственно идентификатор. Чуть ниже на странице настроек плагина подробно расписано, как найти его в том или ином сервисе. Я расскажу, как вставить видео youtube на сайт. На странице просмотра ролика адрес страницы выглядит так: «http://www.youtube.com/watch?v=eJG8mGM66d0».

id видео youtube

Последний набор символов как раз и есть ID. Копируем его и вставляем между открывающим и закрывающим тегом шорткода.

Как вставить видео youtube на сайт в виде галереи?

Теперь усложним задачу и создадим на блоге полноценную видеогалерею. В этом нам поможет плагин TubePress. Нстроек множество, так что запаситесь терпением, чтобы все досконально изучить.

После установки и активации заходим в «Параметры > TubePress»

вставить видео на сайт tubepress

В первой вкладке зададим основные параметры для отображения видеогалереи. Можно выбрать как записи от одного конкретного пользователя или его канала, так и по всему ютубу на основе фильтров — самые просматриваемые, лучшие оценки, лидеры обсуждений, недавно добавленные, лидеры обсуждений и т.д. И аналогичные настройки для Vimeo.

Следующая вкладка — «Thumbnails» — для настроек превью и блоков в галерее: количество отображаемых элементов, отображать количество просмотров, размеры миниатюр.

Далее — «Встроенный проигрыватель». Здесь настраиваем непосредственно плейер — цвета, размеры, отображение заголовков и описаний, варианты отображения проигрывателя: в том же окне, в новом окне или с использованием специальных эффектов.

«Показ метаданных» — настраиваем, какие данные о видео будут отображаться.

«Theme» — тут выбирается одна из предустановленных темой оформления видео.

«Feed» — настройка вариантов сортировки клипов в галерее, а также API ключи для YT и Vimeo.

«Кеш» — возможность включить кеширование страниц видеогалереи для уменьшения нагрузки на сервер.

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

TubePress на практике

С теоретической частью разобрались, переходим к практике. Для вставки единичного видеоролика в статью достаточно лишь прописать такой короткий код:

[tubepress video="J51kfduN5aA"]

Набор символов, как вы уже догадались, это ID ролика. Код одинаково работает как для Youtube, так и для Vimeo.

Для вставки галереи с заданными настройками, добавляем код:

[tubepress name = "value"]

И получаем примерно следующее:

youtube вставить видео на сайт

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

Как я говорил, плагинов, чтобы вставить видео на сайт очень много, поэтому предлагаю Вам посмотреть видеоурок, в котором я разберу еще два других плагина, с помощью который вы сможете вставить видео YouTube на сайт — My Youtube Playlist и Smart Youtube. Также некоторые более тонкие настройки читайте и смотрите в статье Несколько интересных настроек для видео на сайте.

И еще список плагинов, чтобы разместить видео на сайте:
Youtube Player
Youtube Chromeless
WordPress Video Plugin
My Videotag
Text Widget OEmbed
Кроме того, есть расширения, позволяющие добавлять видео в комментарии — об это на блоге отдельный урок.

Как вставить видео на сайт без плагинов?

Теперь давайте рассмотрим вариант, когда вы не хотите использовать сторонние сервисы, а все файлы хранятся на вашем хостинге. Тогда для вставки видео есть два пути — старый и проверенный — JavaScript, и новый, но пока поддерживаемый не всеми браузерами — HTML 5.




Java Script

Загрузите к себе на блог и распакуйте в корневую папку скрипт FlowPlayer, после чего подключите его в хедере или футере кодом:

<script src="HTTP://ВАШ_ДОМЕН/flowplayer/flowplayer-3.2.2.min.js"></script>

и вставьте плейер на страницу кодом

<a href="АДРЕС_ВИДЕО.mp4" style="display:block;width:560px;height:315px;" id="player"></a>
<script language="JavaScript">
flowplayer("player", "HTTP://ВАШ_ДОМЕН/flowplayer/flowplayer-3.2.2.swf",
{ clip: { autoPlay: false, autoBuffering: false } });
</script>

изменив адрес папки, куда вы сохранили скрипт и ссылку на видеоролик. Подробную документацию по использованию параметров плейера можно найти на сайте разработчика.

HTML 5

Хотя стандарт html 5 пока официально не введен, почти все современный браузеры его поддерживают, поэтому можно спокойно его использовать у себя на блоге. Для вставки видео на сайт при помощи этого способа, добавьте новую фунцию в functions.php для создания шорткода:

function html5_video($atts, $content = null) {
    extract(shortcode_atts(array(
        "src" => '',
        "width" => '',
        "height" => ''
    ), $atts));
    return '<video src="'.$src.'" width="'.$width.'" height="'.$height.'" controls autobuffer>';
}
add_shortcode('video5', 'html5_video');

Теперь можно на страницу просто вставить такую строку, вписав свои значения высоты, ширины и адреса видео:

[video5 src="ССЫЛКА_НА_РОЛИК.mp4" width="640" height="480"]

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

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