Приветствую всех постоянных читателей моего блога, а также тех, кто случайно забрел на просторы сего веб-сайта. Думаю, вы уже в большей или меньшей степени умеете верстать как минимум не сложные сайты и заполнять их текстовым и графическим контентом. Но что делать, если такой информации недостаточно и, например, основное направление вашего сайта – это видеоуроки?
Тогда ничего не поделаешь, придется осваивать «дзен» работы с видеофайлами при помощи современных механизмов веб-языков. Именно поэтому тема данной публикации: «Как добавить видео на сайт html».
В статье я познакомлю вас с основными форматами видеоинформации, расскажу об элементах управления таким видом контента, дам описание трем способам вставки видео на страницу, а также по традиции приведу примеры кода программ. Перейдем к делу!
Форматы видеофайлов
Само по себе видео представляется множеством отдельных изображений. Нам привычнее всего их называть кадрами. Однако если хранить каждый кадр, например, фильма, то общий размер документа будет огромен. Именно поэтому все видеофайлы сжимаются и предоставляются нам в разных форматах.
Адаптивное видео с YouTube правильно (HTML, CSS, JS)
Наиболее распространенные форматы вам, вероятнее всего, известны. Это avi, asf, mov, mp4 (MPEG4), ogg и другие.
Начнем с AVI (Audio-Video Interleaved). Этот формат был разработан корпорацией Microsoft и представляет собой контейнер, в который можно вложить видео, сжатое любым стандартом. Храниться может как один поток (например, только аудио или только видео), так и несколько.
Правда существует ограничение: звуковых дорожек может быть много, а вот видеодорожка только одна. Думаю, с разбором avi проблем не возникнет, так как у каждого на компьютере есть фильм или клип с расширением .avi.
ASF разработан все той же корпорацией Microsoft и работает с потоковыми документами типа видео и аудио. Преимущество ASF состоит в том, что он не требует от вас установки определенных кодеков. Таким образом, он указывает структуру потока переносимых данных, но не ограничивает в выборе метода кодирования видеоинформации. Может иметь расширения: .asf, .wma и .wmv.
Контейнер MOV был разработан второй большой мировой корпорацией Apple специально для их приложения QuickTime. Хоть формат и рассчитан на операционную систему Mac OS X, он отлично воспроизводится и в Windows.
Контейнер чрезвычайно удобен для редактирования лежащих в нем файлов, а также может в себе хранить не только несколько дорожек аудио- и видеоинформации, а еще и субтитры, панорамы и анимации. Среди расширений можно встретить .QT или .MOV.
Mp4 – очень известный формат хранения видеофайлов. На самом деле это сокращение от названия стандарта сжатия – MPEG4. Это фильм или клип, который по своим возможностям не уступает предыдущему формату MOV.
Используется для передачи документов в социальных сетях, электронной почте и других сервисах интернета. Своих маленьких размеров файлы с таким расширением достигают за счет продуманного алгоритма сжатия, а также использование сжимающих стандартов отдельно для аудио- и видеодорожек.
И наконец ogg. Данный формат является универсальным, бесплатным и доступным для всех желающих. Этот мультимедийный контейнер был разработан некоммерческой компанией Xiph.Org Foundation. Формат функционирует с различными кодеками и может хранить в себе любые виды мультимедиа. Расширение таких файлов выглядит .ogg.
Учимся добавлять на веб-ресурс видео
Когда возникает желание предоставить возможность пользователям сайта смотреть видеоуроки или клипы с ютуба, то сразу же перед разработчиком возникает вопрос: «А каким именно образом мне стоит загрузить видеоконтент?»
На сегодняшний день существует множество разных лазеек, вариантов и даже костылей. Я хочу рассказать о трех самых простых и удобных вариантах вставки видео.
Если вы хотите усвоить данный материал, то советую вам не лениться, а собрать всю свою волю в кулак и проработать примеры самостоятельно. Хочу напомнить, если у вас нет профессиональной среды разработки или хотя бы Notepad ++, то вооружитесь программой «Блокнот».
Итак, я научу вас вставлять видеодокументы тремя способами:
- используя ссылку с YouTube;
- загружая клипы с локального компьютера;
- пользуясь стандартными механизмами html5.
Но для начала нужно подготовить каркас будущей страницы. Для этого через блокнот создаем документ с расширением .html (как правильно создавать веб-страницы через «Блокнот» я писал в первых уроках) и вставляем туда ниже представленный код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Вставка видео из разных источников body < background:#FFFAF0; color:#A52A2A; width:100%; margin:0; text-align:center; >h1
Способ 1: добавление видео с веб-сервиса YouTube
Способ 2: добавление видео с помощью плеера
Способ 3: добавление видео при помощи тегов html5
Вставка видео из разных источников body < background:#FFFAF0; color:#A52A2A; width:100%; margin:0; text-align:center; >h1
Способ 1: добавление видео с веб-сервиса YouTube
Способ 2: добавление видео с помощью плеера
Способ 3: добавление видео при помощи тегов html5
Сохраните заготовку программы. При запуске файла в окне браузера откроется веб-страница с тремя стилизованными заголовками.
О YouTube, поделись ссылочкой
Через сервис YouTube при помощи ссылки можно загрузить как уже имеющиеся видео, так и свое собственное. Если же вы добавляете на свой веб-сайт персональное видео и хотите, чтоб оно передавалось через ссылку с ютуба, то для начала по инструкции загрузите видео ресурс на сервис.
Далее действия одинаковые:
- Переходите на вкладку с выбранным клипом или фильмом;
- Под ним нажимаете кнопку «Поделиться»;
- Выбираете способ «HTML-код»;
- Копируем сгенерированный текст.
Разработчики сервиса предоставляют вам код html с уже встроенной ссылкой и тегом iframe.
iframe> — это контейнер, создающий плавающий фрейм с находящейся в нем информацией, которую можно загружать.
Стоит отметить важный момент. Новые браузеры работают с html5 и поэтому игнорируют данный элемент. Это также было одной из причин, почему я решил рассказать о нескольких способах вставки видеодорожек.
Вернемся к нашей программе. Скопированный текст вставляем разу после первого заголовка. Эту часть кода я прикрепил ниже:
Способ 1: добавление видео с веб-сервиса YouTube
Теперь если вы обновите вкладку с примером (можно при помощи клавиши F5), то увидите под первым заголовком вставленное видео.
Загрузка клипов с локального компьютера
Для того чтобы загрузить видео с вашего компьютера, для удобства нужно разместить его возле создаваемой html-страницы. Далее использовать один из плееров. Для примера я использовал специализированный плеер под названием Flowplayer. Он выложен в интернет в свободном доступе и скачать его не проблема.
Впервые за все наши написанные примеры мы затронем код языка javascript. Так как данный инструмент значительно расширяет возможности веб-языков и делает сайтостроение более гибким, он идеально подходит для данного случая.
Для начала откройте документ с кодом примера и сразу после закрывающегося тега вставьте строку, подключающую плеер к нашей странице. Текст примера скопируйте ниже:
Далее после второго заголовка необходимо вставить текст, состоящий из html и js языков:
1 2 3 4 5 6 7 8 9 10 11 12
Способ 2: добавление видео с помощью плеера
flowplayer(«player», «http://путь, по которому вы сохранили файл/flowplay/flowplayer-3.2.2.swf», < clip: < autoPlay: false, >>);
Способ 2: добавление видео с помощью плеера
flowplayer(«player», «http://путь, по которому вы сохранили файл/flowplay/flowplayer-3.2.2.swf», < clip: < autoPlay: false, >>);
Вам нужно изменить 2 строки данного кода. В a href= «1.mp4» укажите название своего видеодокумента. Если он лежит не рядом с создаваемой страницей, то до названия через слеш нужно добавить имя каталога. Например, my/1.mov. И вторая строка в скриптовом коде.
Пропишите свой путь к файлу.
Воспользуемся современными методами
Новая платформа html5 предоставляет современные теги для вставки и отображения видео. Мы воспользуемся тегом video> и его атрибутом controls, который к загруженному файлу добавляет панель управления. После третьего заголовка вставьте код:
Если видеодорожка не отобразилась, то либо вы пользуетесь старой версией браузера (нужно использовать ), либо неверно указали путь к документу (src=»https://romanchueshov.ru/osnovyi-html/1.mp4″).
Элемент
Помимо привычных инструментов для вставки мультимедиа существует и такой тег, как embed>. Он помогает браузерам отобразить те файлы мультимедиа, которые изначально первый не понимает. Для таких видео- или аудиофайлов приходится использовать специальные дополнения или плагины. Пример кода с данным элементом выглядит вот так:
На этом, пожалуй, все. Желаю удачи со вставкой видеофайлов на ваши веб-ресурсы. А тем временем подписывайтесь на мой блог и не забывайте делиться ссылкой с друзьями.
С уважением, Роман Чуешов
Источник: romanchueshov.ru
Видеохостинг: как разместить видео на своём сайте
Что делать, если возникла необходимость добавить поддержку размещения и просмотра видео на сайте? Существует великое множество способов — и в данной статье я постараюсь наиболее полно рассмотреть популярные сервисы видеохостинга, а заодно порекомендовать некоторые модули для CMS Drupal.
В начале пару слов о типичной организации процессов сохранения и воспроизведения видео. В целях экономии пространства загружаемое пользователем видео конвертируется в один из распространенных форматов для передачи видео по сети. Самым популярным форматом для получения роликов с невысоким качеством картинки и очень небольшим размером выходного файла в настоящий момент является flv (flash video), который использует кодек H.263. В случае, если необходимо получить видео более высокого качества, то ролики конвертируются в какой-либо формат, поддерживающий кодек H.264.
H.264 обладает большей степенью сжатия и позволяет получить лучшее по сравнению H.263 качество изображения при одинаковом весе выходного файла, но конвертация с его использованием съедает гораздо больше процессорного времени. Для воспроизведения видео на сайте используются flash плееры, поддерживающие соответствующие форматы.
На этом закруглимся с теорией и приступим к рассмотрению возможных схем.
Схема №1: Минимальное участие
Проще всего взвалить заботу по загрузке видеороликов на сторонние сервисы, такие как YouTube, Blip.TV или Revver. Денег платить не надо, пространство на вашем хостинге не задействовано, транслирование контента пользователю вашего сайта происходит через распределенную сеть серверов, принадлежащих видеохостингу, а это значит, что:
1) Ваш исходящий трафик не расходуется.
2) Видеоролики имеют высокую степень доступности пользователям из любой точки мира.
Но такие ресурсы могут иметь ряд ограничений или запретов, особенно касающихся использования данного сервиса коммерческими сайтами — так что внимательно читайте пользовательские соглашения, прежде чем реализовывать данную схему.
Выглядит она следующим образом: пользователь загружает ролик на стороннем сервисе и копирует ссылку на него, после чего сохраняет ее на вашем сайте, где она преобразуется при просмотре в соответствующее видео.
Для проигрывания роликов могу посоветовать модуль Embedded Media Field, который в данный момент поддерживает воспроизведение видеороликов с почти двух десятков видеохостингов и агрегаторов.
Из минусов данной схемы можно отметить то, что пользователю для загрузки видео придется покинуть ваш сайт, он не сможет выбрать качество конвертации, внешний вид плеера будет статичен или ограничен несколькими вариантами, тоже самое можно сказать про его функциональность. Также опционально поверх ролика может быть наложено лого сервиса, до или после отображена реклама и т.д.
В общем, вариант из разряда «дешево и сердито», крайне скудный в плане конфигурирования.
Схема №2: Удобное размещение
В этом случае пользователи загружает видео на сторонний сервис непосредственно с вашего сайта, при этом ролики обычно размещаются под единственным аккаунтом. Место на хостинге может использоваться для временного сохранения видео до момента последующего трансфера на выбранный сервис, или не использоваться вовсе.
В качестве примера — модуль Video Upload для YouTube.
Стоит отметить, что многие сервисы бесплатно предоставляют API под подобные задачи или даже полноценные сайты-заготовки, например в рамках партнерских программ.
При этом АPI обычно пишется для многих языков программирования, и почти всегда присутствует Javascript API, благодаря чему такую схему можно очень просто воплотить в жизнь. Исходя из личного опыта, могу сказать, что PHP API, предоставляемое [http://rutube.ru/ Rutube], с минимальными усилиями по переделке интегрируется с Drupal.
Схема №3: Профессиональные видео-провайдеры
А теперь пришло время рассмотреть компании, специализирующиеся на создании любых мыслимых сервисов, так или иначе связанных с видео и интернетом. Такие компании называются видео провайдерами (video provider), и используют собственные сети доставки контента (CDN — content delivery network). Для работы с ними необходимо создать аккаунт, стоимость которого зависит от используемого спектра услуг, объемов загружаемого и транслируемого видео, желаемой функциональности, уровня технической поддержки, объемов работ по внедрению или переходу на данную платформу, необходимому API и пр. Зачастую вместо конкретных цен на сайте видео провайдера можно обнаружить предложение написать письмо или позвонить — в этом случае готовьтесь, что цены на услуги будут начинаться с нескольких сотен долларов в месяц.
Итак, что же можно получить за порой немаленькую сумму денег?
1) Изменение внешнего вида флеш плеера под ваш дизайн и функционал, создание виджетов.
2) Декодирование в любой нужный вам формат, в том числе и .
3) Предоставление необходимых инструментов для массовой загрузки видеороликов, отчетности и аналитики.
4) Создание собственного интернет-телеканала.
5) Редактирование видеороликов онлайн, микширование.
6) Загрузка контента пользователей, удобное управление их аккаунтами и правами.
7) Внедрение рекламы, участие в рекламных сетях.
И это далеко не полный список, который варьируется от провайдера к провайдеру, среди которых: brightcove, viddler, ooyala, thePlatform, Onstream media, magnify.net, iPlayerHD, fliqz, Kaltura (модуль для Drupal — http://drupal.org/project/kaltura/).
Схема №4: Видеохостинг своими руками
Если после анализа всех требований и просмотра всех доступных вариантов, вы пришли к мысли, что создание собственного видеохостинга с хранением роликов на вашем собственном сервере — это единственный правильный и наиболее выгодный путь для решения поставленной задачи, то вам сюда. В следующей статье я подробно расскажу как организовать видеохостниг под Drupal своими силами.
Тут я бы хотел представить вам руководство по созданию собственного видеохостинга на Drupal. Для достижения этой цели будет использоваться многофункциональный модуль FlashVideo. Подробное описание каждого шага поможет установить и настроить этот модуль правильным образом. Так же я расскажу о том, как создать необходимый для загрузки видео тип ноды, пояснив как преодолеть некоторые ограничения Drupal, связанные с модулем Upload.
Введение
Первое, о чем стоит задуматься, создавая собственный видеохостинг — это о том, где же будут храниться видеоролики. В случае, если вы решите размещать их у себя на хостинге, стоит озаботиться подбором подходящего выделенного сервера. Альтернативным вариантом является размещение контента на сторонних серверах, например в рамках Amazon Simple Storage Service (Amazon s3) — такая возможность также присутствует в FlashVideo.
Модуль FlashVideo позволяет конвертировать добавляемые в аттачменты видеоролики в нужный формат (по умолчанию во флеш — .flv) для указанных типов нод. Данный модуль имеет множество настроек, которые позволяют детально сконфигурировать процесс перекодирования и отображения видеоматериала.
ffmpeg
Для работы модуля необходима программа ffmpeg, которая позволяет конвертировать видео из одного формата в другой. Соответственно, ваш хостер должен предоставлять такую возможность.
К слову, поддержка ffmpeg — далеко не редкость, так что с этим не должно возникнуть проблем. Как установить ffmpeg на локальной windows-машине, использующей Denwer, можно в частности прочитать тут.
Настраиваем параметры php
Далее, для корректной работы модуля вам необходимо поменять настройки ряда php параметров:
- upload_max_filesize — задает максимальный размер загружаемого файла;
- post_max_size — определяет максимальный размер POST`а, который должен быть больше либо равен upload_max_filesize;
- max_execution_time — устанавливает максимальное количество секунд, которое может исполнятся скрипт. Данный параметр должен обеспечивать достаточное количество времени для конвертации больших файлов.
- max_input_time — максимальное количество секунд, в течении которых скрипт может считывать входящие данные. Слишком маленькое выставленное время приведет к тайм-ауту больших по весу загрузок.
Автор модуля рекомендует выставить следующие значения (либо в php.ini, либо в корневом .htaccess файле):
php.ini
post_max_size = 100M
upload_max_filesize = 100M
max_execution_time = 1000
max_input_time = 1000
.htaccess
php_value post_max_size 100M
php_value upload_max_filesize 100M
php_value max_execution_time 1000
php_value max_input_time 1000
Но, как вы понимаете, конкретные цифры зависят только от ваших задач — например, от лимита на размер видеороликов, который вы желаете установить.
В любом случае, данные параметры надо менять с осторожностью, не забывая о последствиях.
Конфигурируем FlashVideo и ставим плеер
Для воспроизведения видеороликов вам потребуется флэш плеер, например протестированные в работе с FlashVideo плееры Dash Media Player или JW Player.
Прочитать краткий обзор ряда плееров можно тут. Для примера воспользуем JW Player.
В случае, если на вашем сайте включен public режим доступа к файлам, будет достаточно поместить файлы плеера в Output Directory.
Если же включен private режим, то вам будет необходимо создать запись до файла плеера в таблице files либо вручную, либо, например, загрузив файлы плеера при сохранении какой-либо ноды (если директория
для файлов совпадает с Output Directory). Не забудьте поменять Flash Player Name на правильный.
Проверка работы
Итак, пришло время создать ноду типа video. Загрузите видеоролик и разместите в описании тег [ video ]
Если после ее сохранения, вы видите, как в выбранном плеере воспроизводится ваш ролик, позвольте поздравить вас с победой!
Если же нет, то проверьте таблицу ffmpeg_data — если там есть записи, попытайтесь вручную запустить ffmpeg с указанными параметрами и посмотрите сообщения об ошибках. Также, если вы не включали конвертацию сразу же после загрузки и у вас не настроен или еще не запускался крон, стоит запустить его вручную.
Если записей об ошибках нет, но не видно плеера, то стоит проверить все ли его файлы вы скопировали в Output Directory, есть ли запись в БД в случае private метода загрузки файла и правильно ли указано имя плеера в Flash Player Name.
Статья автора модуля про FlashVideo (содержит раздел о проблемах) — http://www.travistidwell.com/flashvideo.
Ограничение количества загружаемых файлов
Забавно, но в корневом модуле Upload невозможно ограничить количество файлов для загрузки в аттачменты.
Допустим, мы хотим, чтобы пользователь мог загружать только один видеофайл для каждой ноды — довольно логично, неправда ли? Можно было бы воспользоваться модулем FileField, но вот вопрос — как заставить работать их в одной связке с FlashVideo? Дело в том, что FlashVideo ролик может быть засабмитен только через Upload аттачмент, но не через FileField. Соотвественно необходимо это как-то исправить.
Самым правильным способом, конечно же, было бы переделать модуль FlashVideo и добиться коммита в CVS проекта.
Однако, когда я столкнулся с подобной проблемой я был очень ограничен по времени, так что у меня родилось следующее решение:
1. Устанавливаем модуль FileField.
2. Добавляем в тип ноды video поле типа file (машинное имя — upload_video) и прописываем разрешенные для загрузки типы файлов.
2. Создаем собственный модуль (назовем его fff) и помещаем в него следующий код:
function fff_form_alter ( $form_id ,
//меняем функцию сабмита формы
unset ( $form [ ‘#submit’ ] [ ‘node_form_submit’ ] ) ;
$form [ ‘#submit’ ] [ ‘fff_redirect_submit’ ] = array ( ) ;
$form [ «#submit» ] [ ‘fff_redirect_submit’ ] [ «#title» ] = ‘Save’ ;
}
//конвертируем объект в массив
function object_2_array ( $data )
return $result ;
}
return $data ;
}
function fff_redirect_submit ( $form_id , $form_values )
{
//смотрим если есть старые файлы и помечаем
//их для удаления
if ( count ( $form_values [ ‘field_upload_video’ ] ) == 2 )
{
$node = new stdClass ( ) ;
$node -> vid = $form_values [ ‘vid’ ] ;
$files = upload_load ( $node ) ;
$form_values [ ‘files’ ] = array ( ) ;
foreach ( $files as $file )
{
$file = object_2_array ( $file ) ;
$file [ ‘remove’ ] = 1 ;
unset ( $file [ ‘vid’ ] ) ;
$form_values [ ‘files’ ] [ $file [ ‘fid’ ] ] = $file ;
}
}
//сабмитим ноду дефолтным методом
$node_url = node_form_submit ( $form_id , $form_values ) ;
//переходим на страницу сабмиченной ноды
return $node_url ;
}
function fff_nodeapi ( type == ‘video’ )
{
switch ( $op )
{
//обрабатываем edit
case ‘prepare’ :
if ( ! $node -> files )
{
break ;
}
$videofile ;
foreach ( $node -> files as $file )
{
if ( $file -> filemime == ‘flv-application/octet-stream’ )
{
$videofile = $file ;
}
}
if ( ! $videofile )
{
break ;
}
//переделываем структуру аттачмента в FileField
$node -> field_upload_video = array ( 0 => array (
‘fid’ => $videofile -> fid ,
‘description’ => $videofile -> description ,
‘list’ => 1 ,
‘nid’ => $videofile -> nid ,
‘filename’ => $videofile -> filename ,
‘filepath’ => $videofile -> filepath ,
‘filemime’ => $videofile -> filemime ,
‘filesize’ => $videofile -> filesize
) ) ;
В результате структура FileField подменяется на структуру аттачмента и, вуаля — все работает так как нам надо!
Из недостатков данного решения можно отметить то, что в базе остается неиспользуемое поле аттачментов.
Источник: housecomputer.ru
Показать видео на сайте WordPress с помощью функций движка и плагина
Прогресс идет вперед и не всегда текстовый формат помогает понять тему, легче и быстрее записать ролик. Загрузить на youtube легко, но как потом показать видео на сайт WordPress вот проблема. Статья полностью ответит на данный вопрос и даст простые и пошаговые инструкции.
Вставить через прямые ссылки
После загрузки файла на любой из популярных хостингов, например Vimeo, Youtube и Tumblr можно воспользоваться прямым URL на видеофайл из браузера. Идем на страницу, где проигрывается ролик и копируем url.
Переходим в создание статьи или записи и во вкладке Визуально ( старого редактора ), или в поле абзац в (Gutenberg), прописываем ссылку и она автоматически преобразуется в экран просмотра.
Показать как именно происходит загрузка невозможно, просто заносите адрес. Можно воспользоваться инструментом для видео формата в редакторе гутенберг.
- Нажимаем на плюс
- Находим раздел вставка
- Ищем сервис или социальную сеть откуда нужно взять ролик на сайт WordPress
Появится блок WordPress куда заносим адрес и нажимаем кнопку вставить.
Метод подходит только для популярных видео сайтов, в других случаях пользуемся встроенным инструментом сервиса.
Добавить iframe в WordPress для видео на сайте
Универсальный метод, каждый сервис, дающий возможность добавить видеоролик на сервер, заботиться чтобы его могли порекомендовать и вывести на сайтах, используется тег iframe.
Таковой является социальная сеть Вконтакте, WordPress не воспринимает ВК и редакторе нет. Открываем видео на сайте ВК и смотрим инструкцию.
- Жмем на стрелочку
- Переходим во вкладку Экспортировать
- Копируем код
- Если нужно, то перед копированием настраиваем величину
Переходим на сайт, в старом редакторе вставляем код во вкладке текст.
Код в WordPress обработался, в Визуально увидим сформированное видео.
Если работаем в Gutenberg, ставим блок HTML-код.
Помещаем iframe конфигурацию, можно нажать Посмотреть, WordPress обработает и добавить видео на экран.
Данная возможность на YouTube находится под видео. Настраиваем отображение и копируем HTML.
На любом сервисе и в социальных сетях ищите кнопку поделиться, и там найдете такую функцию как в ВК экспортировать или встроить. Для более наглядного примера смотрите наше видео.
Появится всплывающее окно, можно сделать множество интересных вещей:
- Задать миниатюру
- Выровнять по центру (что бывает проблематично)
- Задать продолжительность
- Сделать автозапуск
- Выставить ширину и высоту
- Управление звуком
- Авто реплей
Плагин переведен на русский язык и не требует разбора. Пользуйтесь если вас не устраивает стандартный функционал WP.
Устаревший тег embed
В вордпрессе существует поддержка бесполезного шорткода embed, его заменил автоматический процесс. Если интересен метод, то берем конфигурацию такого вида.
[ embed ]URL скопированная с ютуба[ /embed ]
Видео формат через компьютер (без ссылок на ютуб)
Выставить видео на сайте можно без ссылки на ютуб, а через жесткий диск компьютера. Ролик будет загружаться с хостинга где располагается блог WordPress. Сразу напишу, почему не стоит использовать способ:
- Сокращает пространство
- Тормозит сайт
- Форматы поддерживаются только в mp4 расширении
- Большие файлы нельзя загрузить
Если не переубедил, то движемся дальше. Нажимаем на кнопку Добавить Медиафайл.
При работе в Gutenberg находим плюс, в разделе основные выбираем блок Видео, остальные шаги одинаковые.
Перетаскиваем с компьютера файл, он загружается.
После сохранения в углу жмем Добавить в запись.
Если процесс прошел хорошо, то в предварительном просмотре увидим загруженное.
Используя любой вариант исполнения следите, чтобы на мобильных устройствах сайт отображался корректно.
Закончу статью, мы ответили на вопрос как работсть с видео на блоге, в статьях и записях с помощью простых инструкций без кодирования.
Источник: wpcourses.ru