Как добавить видео на свой сайт с использованием тега video в html5
На одном из сайтов клиента понадобилось добавить видео на страницу. Вроде бы задача не сложная, загрузили видео на youtube, скопировали код для размещения на своем сайте, все работает, все красиво, но вот во время просмотра всплывает реклама, которая очень не нужна в данном случае. Начали искать другие видео-ресурсы, на которых можно разместить свое видео, оказалось, что у всех показывается реклама во время просмотра видео. Тогда приняли решение разместить видео на своем хостинге и вывести его на странице с помощью тега .
Самый простой способ вывести видео на странице это прописать такой код:
- id — идентификатор для тега, размеры видео (ширина, высота),
- src — путь к видеофайлу, poster — картинка, которая будет заставкой для окна видео,
- controls — подключение встроенной в браузер панели управления для видео (у каждого браузера свои элементы управления),
- preload — возможность начать загрузку видео сразу при при открытии страницы, что позволит запустить видео без задержек на загрузку, которая при стандартных настройках начнется только после нажатия кнопки Play.
Из всех этих параметров обязательным является только src — путь к файлу видео, остальные по желанию. Более подробно про тег можно прочитать здесь.
Но во время размещения видео столкнулись с некоторыми проблемами, потому как разные браузеры поддерживают разные кодеки и поэтому не все воспроизводят видео в формате .mp4. Пришлось искать программы для конвертации видео в нужные форматы, помогли эти программы:
DVDVideoSoft Free Studio — программа для конвертации видео в формат .ogv
FreeWebMVideoConverter — программа для конвертации видео в формат .webm
И на сайте разместили по итогу такой код для вывода видео:
Благодаря такому коду видео будет воспроизводиться в любых браузерах, а если в каких-то и не откроется, тогда сработает последнее правило и видео откроется с помощью flash-проигрывателя.
Могут возникнуть проблемы с MIM-типами. MIM-типы — часть значения атрибута type у тега source. Но добавление атрибута type не является достаточным, вы также должны убедиться, что ваш веб-сервер включает в HTTP-заголовок Content-Type соответствующий MIME-тип.
Если вы применяете веб-сервер Apache или его производные, то можете использовать директиву AddType в httpd.conf или файле htaccess расположенный в той директории, где вы храните ваши видеофайлы. Если вы используете другой веб-сервер, обратитесь к документации вашего сервера о том, как установить HTTP-заголовок Content-Type для определенных типов файлов.
Добавьте в свой файл htaccess в корне сайта такие правила:
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
Первая строка предназначена для видео в контейнере Ogg. Вторая строка для видео в контейнере MPEG-4. Третья для WebM. Установите это один раз и забудьте. Если вы не указали эти директивы, ваше видео может не играть в некоторых браузерах, даже если включены MIME-типы в атрибуте type вашего HTML-кода.
Вот так выглядит прогрыватель видео в Firefox:
У многих дизайнеров, которые создают серьезные и интересные макеты, есть в наличии масса уникальных и…
На форуме Webmasters увидел интересное решение для того, чтобы увеличить скорость загрузки страниц на сайте,…
Делал для одного сайта выплывающие блоки при наведении на родительский элемент. В принципе, нет ничего…
Нашел на просторах сети интересную овальную кнопку, которая построена только на CSS3 без использования графических…
Как вставить видео на сайт Joomla?
Вставить видео в 3 или Joomla 4 с популярных видеохостингов, таких как YouTube и Vimeo, можно посредством пользовательского HTML-кода, плагина AllVideos и других сторонних расширений. Подробно рассмотрим все способы вставки и определим самый предпочтительный.
Способы вставки видео в Joomla
- плагина AllVideos;
- шорткодов ShortCode Ultimate или других ультимативных расширений;
- пользовательского HTML-кода.
Давайте проанализируем каждый в соответствующем порядке.
Плагин AllVideos
AllVideos — плагин для Joomla, призванный упростить вставку видео в контент страниц.
Данное расширение пользуется огромной популярностью в первую очередь благодаря тому, что является полностью бесплатным: на момент написания данного материала общая оценка AllVideos на JED составляет 4.5 из 5 на основании 278 (!) голосов. Но не спешите устанавливать расширение: сперва давайте разберёмся, так ли всё гладко.
Принцип работы AllVideos прост: устанавливаем и активируем плагин, после чего можем вставлять видеоролики в Joomla из YouTube и прочих сервисов с помощью шорткодов. И тут у неосведомленного пользователя может возникнуть вопрос: а каких шорткодов? Действительно, этот момент не столь очевиден, и расширение не предусматривает никаких кнопок в редакторе для упрощения добавления видео. На самом деле это совсем не проблема, и стоит лишь понять синтаксис (короткая инструкция тут) и вставлять с помощью AllVideos больше не составит труда.
Пример шорткода вставки видео с YouTube:
tj_V7BDHTxk
На выходе данный шорткод преобразуется в:
Этот HTML-код и выводит на экран нужное нам видео.
Казалось бы: что может быть проще? Вставил часть URL-адреса в небольшой шорткод, а дальше — дело техники. Но не спешите радоваться! Если взглянуть за «занавес» веб-страницы, то можно увидеть целых 5 ресурсных файлов, которые добавляет к странице AllVideos.
Откровенно говоря, подгрузка 5 файлов для отображения ролика с YouTube — это перебор, ведь каждый лишний ресурс замедляет загрузку страницы.
Но это еще не самое страшное!
Полезно знать!
Опытным путём было установлено, что AllVideos конфликтует с плагином JCH Optimize (незаменим для оптимизации скорости загрузки сайтов на Joomla), мешая последнему правильно объединять JS-файлы, тем самым делая его вредным для сайта: файлы дублируются и размер страницы увеличивается вместе с временем её загрузки.
Итак, стоит ли устанавливать и использовать плагин AllVideos весом 1.4 Мб для вставки видео на сайт Joomla с учетом всего вышесказанного? Наш ответ: Нет!
Шорткоды для вставки видео
Существует достаточно большое количество ультимативных наборов шорткодов для вставки самых разных элементов в контент страниц Joomla, и практически каждый из них имеет в своём арсенале короткий код для вставки видео. Самым достойным представителем в линейке подобных расширений является Shortcode Ultimate.
Вставлять шорткоды Shortcode Ultimate — одно удовольствие. Чтобы добавить видео с YouTube:
- нажимаем кнопку Вставить шорткод в текстовом редакторе;
- из списка элементов во всплывающем окне находим и выбираем YouTube видео;
- вставляем ссылку на видео и при необходимости настраиваем другие параметры;
- можно просмотреть результат в текущем окне, нажав Предварительный просмотр;
- жмем Вставить шорткод.
Короткий код будет выглядеть так:
[youtube url="https://www.youtube.com/watch?v=tj_V7BDHTxk"]
Как и в случае с AllVideos, данный код на выходе преобразуется в HTML , отображающий указанное видео. Если мы опять посмотрим в код страницы, то снова увидим несколько ресурсных файлов, добавляемых плагином, которые также не лучшим образом сказываются на скорости загрузки. Тем не менее, применение Shortcode Ultimate для вставки видео в Joomla 3 является более предпочтительным относительно AllVideos по следующим причинам:
- ультимативный набор шорткодов;
- кнопка редактора для вставки шорткодов;
- наглядная настройка параметров видео;
- никаких проблем с JCH Optimize.
Только одно «но»: Shortcode Ultimate является платным расширением. Не подходит? Читаем далее.
HTML-код для вставки видео
Универсальный способ вставки видео не только в Joomla, но и на любой сайт, является пользовательский HTML-код. И здесь не надо ничего придумывать:
- заходим на страницу видео с YouTube;
- кликаем по видео правой кнопкой мыши;
- из контекстного меню выбираем Копировать HTML-код;
- в редакторе TinyMCE жмем кнопку Выключить редактор (правый нижний угол) для перехода в режим вставки HTML (без форматирования);
- вставляем скопированный код и сохраняем;
- проверяем и видим, что видео на странице не появляется;
- возвращаемся в редактор и видим, что вставленного кода в нём нет.
Да, вставленный код был удалён после сохранения. Проблема в следующем:
Полезно знать!
Редактор TinyMCE по умолчанию удаляет из кода страниц тег , который находится в списке запрещенных тегов.
Чтобы это исправить:
- переходим в менеджер плагинов Расширения → Плагины;
- находим плагин Редактор — TinyMCE и переходим в его настройки;
- выбираем вкладку с набором для нужной группы пользователей (если вы являетесь , то это будет Набор 0);
- находим опцию Запрещенные теги и удаляем оттуда ;
- сохраняем.
После этого возвращаемся к редактору Joomla, перезагружаем страницу с ним, жмем Выключить редактор и вновь вставляем скопированный с YouTube код, который выглядит приблизительно так:
На этот раз страница отобразит нужно нам видео, но в соответствии с параметрами, которые содержатся в скопированном коде: атрибуты тега width и height содержат значения ширины и высоты окна проигрывателя в соответствии с его размерами на странице, с которой был скопирован код.
Как правило необходимо, чтобы видео на экране было пропорционально растянуто на всю ширину родительского контейнера.
Чтобы каждое вставленное ручным способом видео отображалось таким образом, скопированный тег нужно вставить в тег со встроенными CSS-стилями position: relative; padding-bottom: 56.25%; height: 0 , а добавить к нему стили position: absolute; top: 0; left: 0; width: 100%; height: 100% :
В результате видео будет пропорционально растянуто, а значения атрибутов width и height проигнорированы.
Чтобы облагородить код, отделим CSS от HTML. Сохраняем стили в соответствующий файл:
div.video < position: relative; padding-bottom: 56.25%; /* соотношение сторон 16:9 */ height: 0; >div.video iframe
После чего для размещения видео на сайте и его корректного отображения достаточно вставить скопированный с YouTube или другого ресурса код с в тег с классом video :
Преимущество вставки видео на сайт Joomla таким способом не требует установки лишних расширений и исключает подключение каких-либо ресурсных файлов. Однако применять шорткоды намного проще, чем всё время держать в памяти HTML-код, но этот момент можно упростить до минимума.
Упрощаем вставку HTML-кода для видео
Если отбросить всё лишнее, то HTML-код для вставки видео выглядит следующим образом:
Т. е. всякий раз, когда необходимо добавить видео на страницу, мы вставляем данный код и в атрибут src копируем URL-адрес. С одной стороны в этом нет ничего сложного, с другой — этот код необходимо помнить.
Упростить задачу можно до самого минимума с помощью специальных расширений:
- Компонент Content Templater
Позволяет сохранять отдельные куски кода в качестве шаблонов и вставлять их с помощью кнопки в редакторе. - Компонент Snippets
Позволяет создавать очень короткие заготовки кода с использованием переменных. Шорткод для вставки видео с YouTube в этом компоненте может выглядеть так:
[youtube]tj_V7BDHTxk[/youtube]
Из предложенных вариантов я бы рекомендовал именно RokCandy, т. к. он позволяет использовать короткие коды внутри других шорткодов, что нельзя реализовать через Snippets, синтаксис заготовок которого ограничивается единой конструкцией. Что касается Content Templater, то он просто хранит в себе нужные нам фрагменты кода и облегчает их вставку.
Выводы
- вставка видео в Joomla с помощью сторонних расширений (AllVideos и другие) добавляет к странице ресурсные файлы, что может негативно отражаться на скорости загрузки;
- плагин AllVideos конфликтует с JCH Optimize, что является веским аргументом против применения первого;
- если на сайте активно применяются шорткоды из Shortcode Ultimate (или ему подобных), то целесообразно использовать соответствующий шорткод из этого набора;
- вставка видео в виде HTML-кода является самым безболезненным для скорости загрузки способом способом;
- если редактор удаляет тег iframe , значит он находится в списке запрещенных тегов;
- упростить вставку HTML-кода для видео можно с помощью отдельных расширений.
Как добавить видео в сайт html
Нашли ошибку? Выделите мышкой и нажмите Ctrl+Enter
Размещение видео на страницах сайта
Есть два способа разместить видео на сайте: залить файл на сторонний видеохостинг и встроить на страницу или загрузить файл непосредственно на сайт.
Вариант 1. Сторонний видеохостинг.
Загрузите видео на подходящий видеохостинг: YouTube, RuTube, Vimeo или любой другой, который поддерживает встраивание кода видео на странице сайта.
Нажмите кнопку «Поделиться» рядом с видео и выберите вариант «HTML-код». Скопируйте появившийся код.
Перейдите на нужную страницу вашего сайта в публичной части, активируйте режим правки и перейдите к редактированию содержимого страницы. Переключите редактор в режим кода и вставьте скопированный ранее код для встраивания видео в нужное место на странице.
Вы можете изменить размер фрейма с видео, меняя значения у атрибутов width и height.
В результате на странице появится ваше видео.
У этого варианта есть очевидный минус: если по каким-то причинам видео удалят с видеохостинга, то оно перестанет быть доступным и на вашем сайте. Кроме того, на стороннем видеохостинге его могут просматривать совсем не посетители вашего сайта. Если подобная маркетинговая стратегия не входит в ваши планы, это тоже может стать минусом.
Вариант 2. Загрузка видео на сайт.
Загрузите видеофайл как обычный файл в медиабиблиотеку.
Вы можете подключить на своем сайте собственный видеопроигрыватель с помощью соответствующего компонента Битрикс или, если ваш сайт поддерживает HTML5, с помощью html-тега.
Подробнее о компоненте и его подключении читайте в документации 1С-Битрикс
HTML-теги. Вставка видео
В нашей системе у вас есть возможность верстать текст на страницах при помощи основных HTML-тегов.
Для этого вам понадобятся страница, созданная с модулем «Редактируемая страница», «Периодика», «Каталог товаров» (только при редактировании текстового поля «Описание раздела» или «Описание» для позиции каталога), «Анкета» (только при редактировании формы «Помощь/Информация») и начальное понимание об оформлении при помощи тегов.
Внимание! Данная возможность в нашей системе не предоставляет возможности вставлять активное содержимое на страницу и менять ее дизайн и может быть использована только для оформления контента.
HTML-теги. Вставка видео. Шаг 1
HTML-теги. Вставка видео. Шаг 2
Полностью скопируйте HTML-код видео, которое необходимо вставить, со страницы видеохостера.
Внимание! Если вы хотите вставить свой видеоролик, вам необходимо предварительно выгрузить его на сайт видеохостера. Самые популярные сервисы для этого — YouTube, RuTube, Яндекс.Видео.
При работе с YouTube используйте старый код для встраивания (вам потребуется поставить флажок «Использовать старый код встраивания»).
HTML-теги. Вставка видео. Шаг 3
Вставьте скопированный код на место, где должно размещаться видео, в режиме HTML.
HTML-теги. Вставка видео. Шаг 4
Подтвердите вставку, нажав кнопку «Сохранить».
HTML-теги. Вставка видео
Если все действия были выполнены верно, на странице появится проигрыватель с видео.
В help приведены самые необходимые на наш взгляд варианты использования HTML-тегов. Но вы также можете использовать для оформления контента на сайте многие другие теги по аналогии с вышеописанными.