TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

11

Иногда видео – это простой способ выразить посетителям свои мысли вместо того, чтобы писать длинный контент. Это может быть практическое руководство, знакомство с вашей компанией или что-то еще. Добавление видео на сайт Weebly также просто, как добавление аудио и текстового контента. Существует четыре способа добавления видео на сайт Weebly, перечисленных ниже, и мы подробно обсудим каждый вариант.

  1. Использование тегов видео HTML5.
  2. Используйте элемент YouTube, чтобы вставлять вам видео YouTube.
  3. Вставьте элемент кода для встраивания любых видео с таких сайтов, как Vimeo.
  4. Элемент HD Video Player для пользователей Weebly Pro.

1 Использование тега HTML5 Video на сайте Weebly

Теги видео HTML5 позволяют размещать собственные видео в видеопроигрывателе по умолчанию. Вам не нужно покупать премиальный план Weebly, чтобы использовать элемент видеопроигрывателя HTML5. Вы можете использовать ссылки на видео с других веб-сайтов или загрузить свои видео в разделе «Тема> Ресурсы». Рекомендуется добавлять видео в формате .mp4, .ogv и .webm, чтобы решить проблему совместимости с браузером.

Перетащите элемент «Код для вставки» на страницу, на которой хотите показать свое видео. Вставьте приведенный ниже HTML-код в элемент «Вставить код». Не забудьте заменить ссылки на видео своими собственными.

<video poster="https://img.webnots.com/2015/06/Slider-3.jpg" width="640" height="480" preload controls loop> <source src="https://img.webnots.com/2015/06/Slider-Video.mp4"> <source src="https://img.webnots.com/2015/06/Slider-Video.webm"> <source src="https://img.webnots.com/2015/06/Slider-Video.ogv"> </video>

Видео будет выглядеть так, как показано ниже, требует ручного воспроизведения и поддерживается всеми современными браузерами, такими как Chrome, Firefox, Safari и Edge.

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

2 Встраивание видео с использованием элемента YouTube

YouTube – популярная платформа видеохостинга от Google, а Weebly предлагает элемент YouTube по умолчанию для простого встраивания видео. Элемент YouTube доступен в редакторе Weebly в категории «Медиа». Вы можете перетащить элемент в любое место области содержимого.

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

Weebly Media Elements

После того, как элемент добавлен в область содержимого, просто щелкните по нему, чтобы увидеть параметры настройки. Вы можете добавить URL-адрес видео YouTube, установить выравнивание и интервал видео.

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

Встраивание видео Weebly на YouTube

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

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

Измените размер и идентификатор видео YouTube в Weebly

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

Weebly не предлагает возможности настраивать ширину и высоту вашего видео, но того же можно добиться, разместив элементы «Spacer» рядом с вашим видео на YouTube.

3 Встраивание видео с использованием собственного HTML

Подобно тегам видео HTML5, вы также можете использовать элемент «Код встраивания» для вставки кода видео iframe с YouTube, Vimeo или любых других сайтов видеохостинга, предлагающих код встраивания iframe.

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

4 Использование элемента Weebly Pro HD Video Player

Последний вариант – обновить свой сайт Weebly до премиум-плана и использовать элемент видеопроигрывателя HD. Это похоже на видеопроигрыватель HTML5, но предлагается как элемент по умолчанию. Видеопроигрыватель высокой четкости (HD) – одна из ключевых функций Weebly Pro, которая позволяет пользователям загружать на свои веб-сайты видеофайлы размером до 1 ГБ. Это обязательная функция, если вы размещаете видео-сайт, требующий неограниченной загрузки видео.

4.1. Особенности Weebly Pro HD Video Player

  • Размер видеофайла 1 ГБ
  • Неограниченное количество видео
  • Автоматическое преобразование HD
  • Без бренда – вы можете загружать видео с собственным брендом.
  • Поддерживает все стандартные форматы
  • Различные размеры видео
  • Воспроизведение видео на странице – видео можно воспроизводить в редакторе Weebly без публикации вашего сайта.
  • Возможность выбрать, может ли пользователь загружать видео или нет.
  • Отрегулируйте размер, поля и положение видео в соответствии с вашим контентом.

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

Видеоплеер Weebly HD

4.2. Процесс загрузки видео на сайт Weebly

  • Просто перетащите значок HD Video на свою веб-страницу.
  • Нажмите на изображение «Нажмите здесь, чтобы загрузить видео» и выберите видео, которое хотите загрузить.
  • После загрузки видео будет автоматически закодировано.
  • Выберите размер вашего видео
  • Воспроизвести видео на странице без публикации и проверить четкость
  • Опубликуйте свой сайт

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

Процесс загрузки видео Weebly

4.3. Управление видео

Во время воспроизведения видео доступны следующие параметры управления видео, как показано на рисунке ниже:

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

Управление видеоплеером Weebly

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

Установив флажок «Видео загружаемое», вы можете сделать видео загружаемым пользователем.

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

Параметры видеоплеера Weebly

Панель управления видео покажет вариант загрузки видео, как показано на рисунке ниже.

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

Вариант загрузки для Weebly Video

4.4. Недостатки

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

  • Видеоплеер – это простой плеер, видео с USB-камеры записывать нельзя.
  • Вы не можете конвертировать свои фотографии в видео
  • Нет возможности сгенерировать код для встраивания
  • Значки социальных сетей недоступны для публикации URL-адреса видео
  • Статистика просмотров видео недоступна – вы не будете знать, популярность вашего видео или сколько людей его просмотрели.
  • Параметр списка воспроизведения недоступен, это означает, что можно загрузить и просмотреть только одно видео.

Даже если вы загрузите замечательное видео на свой сайт Weebly, пользователи не смогут встраивать ваши видео на свой сайт. Хуже всего то, что видео нельзя публиковать ни в каких [социальных сетях] (https://techblog.sdstudio.top/osnovy-trafika-v-socialnyh-setjah/ «Основы трафика в социальных сетях»), что означает потерю входящих ссылок на ваш сайт и, следовательно, трафика и рейтинга в поисковых системах. В то же время это защищает авторские права владельцев, особенно если у вас есть интернет-магазин, продающий лицензионные видео.

Weebly Free против профессионального видеоплеера

Бесплатное встраивание видео имеет следующие преимущества перед загрузкой с использованием элемента профессионального HD-видеопроигрывателя.

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

Источник записи: www.webnots.com
Leave A Reply

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