Вставка аудио- и видеоконтента на сайт: возможные способы
В современном интернете мультимедийный контент выполняет очень важную роль, поскольку при помощи аудио, и особенно видео, информацию донести гораздо проще, чем в текстовом виде. К тому же, проникновение высокоскоростного интернета всё увеличивается, и сегодня смотреть видеоролики на сайте может подавляющее количество пользователей (популярность Youtube и других сервисов – тому доказательство). Но есть проблема – не каждый веб-мастер знает, как правильно вставлять такой контент в код страницы, чтобы не «поломать» вёрстку, а мультимедийное содержимое могли просмотреть все, вне зависимости от устройства, через которое они заходят. Эта статья научит, как делать подобную процедуру правильно.
Вставка при помощи готового кода
Многие популярные сервисы, дающие возможность сделать видеоролик и разместить его в интернете (Coub, Vimeo, Youtube и т.д.) максимально упростили процедуру вставки видео. Для каждого видеоролика, загруженного на сайте, можно в два клика сгенерировать готовый код для вставки в страницу. Обычно речь идет об iframe. В готовом коде есть возможность настроить ширину и высоту видеоконтейнера, толщину рамки, а также разрешить или запретить открываться во весь экран. Полученный код достаточно вставить в нужное место страницы (лучше всего для этого использовать отдельный DIV, что упростит позиционирование и настройку стилей), и после этого контент будет отображаться на странице.
Используем сторонний плеер
Если вы не хотите размещать видео на каком-то видеохостинге, этого можно и не делать. Существуют готовые решения на основе Flash (например, Flow Player), которые позволяют вставлять в страницу проигрыватель, отображающий любой видеофайл, который ему укажут. Чтобы разместить такой плеер на странице, нужно подключить его в виде JavaScript-файла в разделе HEAD страницы, чтобы инициализировать, а потом в нужном месте вставить основной рабочий код в отдельном блоке. После этого останется только указать ссылку на видеофайл (лучше всего его разместить на своем хостинге), и ролик будет доступен на странице. Этот способ предоставляет больше возможностей для кастомизации, потому и считается лучше предыдущего.
Возможности HTML5
В активно внедряемом стандарте HTML5 появилась самая простая и удобная возможность вставлять видео- и аудиоконтент – теги <video> и <audio>. Практически все современные браузеры, как десктопные, так и мобильные их поддерживают, и если вы готовы пожертвовать небольшим количеством посетителей, не желающих отказываться от устаревшего IE6, то это самый лучший вариант. Чтобы вставить видеоролик или аудиозапись, достаточно разместить их внутри соответствующего тега, а остальное браузер сделает сам (подберет нужный кодек и т.д.). Чтобы как можно большее количество людей смогли просмотреть видео, рекомендуется добавлять его в различных форматах – MP4, OGV и других. Браузер при просмотре сам выберет тот, который сможет воспроизвести. Такой способ позволяет максимально настраивать отображение контента под себя – доступно множество настроек и возможность использовать стили.