Добавление видео на веб-страницы

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

Встраивание

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

Доступ к кодированию видео

Чтобы получить доступ к кодировке видео с сайта хостинга, нажмите ссылку «Поделиться» или «Встроить». Обычно он находится под видео или справа. Когда вы нажмете ссылку «Встроить», будет сгенерирован фрагмент кода, который вы скопируете.

Пример YouTube

На ютубе кодировка выглядит так:

Пример Vimeo

Vimeo также использует

Настроить размер

Поскольку вам может не понадобиться размер видео по умолчанию, YouTube и Vimeo позволяют выбирать различные размеры из раскрывающегося меню или даже настраивать размер. Эта опция очень удобна, потому что правильное соотношение ширины и высоты поддерживается для вас независимо от выбранного вами размера. Без правильного соотношения ваше видео будет выглядеть искаженным.

Три способа размещения видео в HTML

Если вам нужно разместить видео на своем сайте без встраивания, это можно сделать несколькими способами — каждый со своими недостатками .

1. Использование тега <object>

Тег <object> — это, по сути, тег-контейнер для любого контента, отличного от HTML. Чтобы вызвать видео с помощью этого метода, поместите следующий код в свой HTML, где вы хотите, чтобы видео отображалось:

Кодирование будет вызывать ссылку, которую вы предоставляете, в данном случае intro.swf, всегда включайте атрибуты высоты и ширины, чтобы ускорить время загрузки. Если ваш контент будет просматриваться в основном на iPad или iPhone, используйте другой метод, поскольку ни один из продуктов не отображает файлы .swf. Единственная другая потенциальная проблема, с которой вы можете столкнуться, заключается в том, что если браузер пользователя не поддерживает Flash, видео не будет воспроизводиться.

2. Использование <video> в HTML5

Этот тег работает во всех современных браузерах. Его главная слабость заключается в том, что требуется видео в нескольких форматах, что увеличивает требования к хранилищу. Формат файла mp4 работает в Internet Explorer, Chrome, Safari и более новых браузерах Firefox. Формат файла ogg предназначен для Opera и более старых версий Firefox.

Ваш браузер не поддерживает видео тег.
</видео>

Если видео не отображается, текст «Ваш браузер не поддерживает тег видео». вместо этого будет отображаться.

3. Использование <video> с <object>

Это, вероятно, лучший метод, поскольку он должен корректно отображаться во всех браузерах. Старые браузеры будут читать тег <object>, а более новые — тег <video>.

Однако вам понадобятся три формата вашего видео: swf, ogg и mp4.

Работа с Flash-видео

Если ваше видео создано с помощью Abode Flash, это будет swf-файл. Эти файлы могут быть вызваны с помощью или

Объект:

Встроить:

Публикация вашего видео

В зависимости от формата исходного видеоклипа вам потребуется опубликовать его в удобном для Интернета формате. Вам также нужно будет решить, редактировать ли видео или загрузить его как есть.

Использовать видео как есть

Перенесите видео с записывающего устройства на компьютер, подключив устройство через порт USB.
Войдите в службу видеохостинга, например YouTube или Vimeo, если вам удобно пользоваться бесплатным сайтом для обмена видео. Найдите клип на своем компьютере, выберите и загрузите клип. Если вы предпочитаете не использовать общедоступный сайт, рассмотреть варианты , как Brightcove , Vzaar или Wistia . Ключевым преимуществом этих сайтов для бизнеса является контроль: можно создавать настройки, запрещающие или разрешающие определенным пользователям просмотр ваших видео, требующие аутентификации пользователей и дающие вам возможность отслеживать действия пользователей.
Если вы передаете видео прямо со своего телефона, используйте соответствующее приложение, чтобы загрузить клип на используемый вами видеохостинг. Чтобы перенести видео с телефона на свой сайт, у вас есть три варианта. Вы можете отправить клип на свою учетную запись Gmail, если он небольшой, подключиться к компьютеру через USB-порт или извлечь карту памяти из телефона и подключиться к компьютеру с помощью устройства чтения карт памяти.

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

Редактировать видео

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

Одним из наиболее часто используемых является Windows Movie Maker, и он достаточно мощный для большинства пользователей. Программа позволяет вам обрезать, склеивать и редактировать видео с простым для понимания и простым в использовании интерфейсом. Он предлагает несколько вариантов вывода, в том числе один, связанный с YouTube.
Если вам нужно профессиональное программное обеспечение для редактирования видео, обратите внимание на Pinnacle Studio , Adobe Premiere Elements и Final Cut Pro .

Распространенные форматы веб-видео

В процессе загрузки такие сайты, как YouTube и другие, преобразуют ваш клип в видеоформат Flash. Поскольку они контролируют процесс преобразования, они будут принимать только распространенные форматы видео, такие как:

.мов
.mpeg4
.avi
.wmv
.mpegps
.flv
.3GPP
ВебМ

Если ваше видео в другом формате, конвертируйте файл в утвержденный формат. Вы можете сделать это, импортировав файл в Window Movie Maker и экспортировав его в правильном формате, или, если вы загружаете его на YouTube, следуйте их инструкциям .

Выбор видеохостинга

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

Использование хостинг-сайта

Преимущества использования хостинга очевидны:

Потенциальное воздействие. Одно из очевидных преимуществ — потенциальное воздействие вашего контента. Ежемесячно YouTube посещают более миллиарда уникальных посетителей — огромная аудитория для любого видео.
Пометка видео: Еще одним ключевым преимуществом является возможность добавлять «метки» для вашего видео. Теги — это ключевые слова, используемые поисковыми системами для поиска вашего контента.
Экономьте на хранилище: наконец, вы используете меньше места на сервере. Видео, как правило, представляют собой большие файлы, которые очень быстро занимают место на диске. Позволив кому-то другому разместить ваше видео, все, что вам нужно, это ссылка или фрагмент кода для добавления на ваш сайт.

Размещение видео

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

Юридическая осведомленность

Обязательно учитывайте вопросы авторского права при показе видео на своем веб-сайте.

Видео других людей

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

Музыкальные соображения

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