Разместить на сайте видео: Как вставить видео ролик на сайт (3 способа)

Содержание

Как разместить видео в формате HTML5

Заказать сайт

Искать везде

  • Искать везде
  • CMS
  • Интернет-магазин 2.0
  • Интернет-магазин 1.0
  • Onicon
  • Maliver
  • Rekmala
  • Pablex
  • Кабинет и почта
  • CRM
  • Интеграции CMS. S3

Главная / Главная / Работа с текстовым редактором / Старый интерфейс (TinyMCE 3) / Работа с медиа (вставка аудио/видео) / Работа с видео / Как разместить видео в формате HTML5

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

Зачастую эту проблему проще всего решить, использовав на сайте ролики в формате HTML5.

С помощью текстового редактора системы управления Вы также можете размещать на страницах своего сайта видео в формате HTML5.

Рассмотрим, как это можно сделать.

Шаг 1

На рабочей панели редактора нажмите на кнопку «Добавить/изменить клип».

Шаг 2

Откроется окно параметров клипа, где Вам будет необходимо выбрать в списке «Тип» — пункт «Вставка HTML5 видео файла».

Шаг 3

Далее необходимо вставить ссылку на видео, например, адрес ролика на youtube.com.

Шаг 4

И после всех настроек нажать «Вставить/Обновить».

Обратите внимание!

Была ли статья вам полезна?

Да

Нет 

Укажите, пожалуйста, почему?

  • Рекомендации не помогли
  • Нет ответа на мой вопрос
  • Содержание статьи не соответствует заголовку
  • Другая причина

Комментарий

Вставка видео из Интернета в Word

Word для Microsoft 365 Word для Интернета Word 2021 Word 2019 Word 2016 Word 2013 Еще…Меньше

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

Для вставки видео и его воспроизведения необходимо подключение к Интернету.

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

Вставка видео из Интернета

  1. В веб-браузере выберите нужное видео. Word поддерживает вставку видео с Vimeo, YouTube и SlideShare.net.

  2. Скопируйте URL-адрес веб-страницы в адресной строке браузера. Кроме того, можно скопировать код встраиваемого видео. 

  3. org/ListItem»>

    ПереключениеWord и выбор места в документе, куда вы хотите разместить видео.

  4. На вкладке Вставка ленты выберите Видео из Интернета.

  5. В диалоговом окне Вставка видео вставьте URL-адрес, который вы скопировали в шаге 2.

  6. Нажмите Вставить.

См. также о вставке видео из Интернета в Word.

Устранение неполадок

Не все видео на этих сайтах разрешено внедрять. Проверьте на этих сайтах сведения о разрешении вставки для выбранных видео. 

Embed video as web content in Word for the web

Если вы используете Word для Интернета, вы можете быстро вставлять видео из нескольких поддерживаемых источников в веб-контент, просто вставлять URL-адрес в документ.

  1. Скопируйте URL-адрес веб-контента, который вы хотите встраить.

  2. При подклеить к Интернету URL-адрес в Word для Интернета документа. Вставленный URL-адрес автоматически становится внедренным контентом.

Дополнительные сведения см. в этой Word для Интернета.

Условия использования и политики конфиденциальности

При использовании видео из Интернета в документе Word помните об условиях использования и политиках конфиденциальности веб-сайта, на котором хранится видео. Word поддерживает вставку видео из Интернета со следующих сайтов:

Vimeo:

  • Условия использования

  • Политика конфиденциальности

YouTube:

  • org/ListItem»>

    Условия использования

  • Политика конфиденциальности

Slideshare.net:

  • Условия использования

  • Политика конфиденциальности

    org/ItemList»>
  1. На вкладке Вставка выберите пункт Видео из Интернета.

  2. В окне Вставка видео можно искать видео на Сайте YouTube или вставлять коды их вставки. (Коды см. на странице, на которой размещено видео.)

  3. Когда найдете подходящее видео, просто нажмите кнопку

    Вставить.

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

Если кнопка «Видео из Интернета» недоступна, убедитесь, что не включен режим совместимости. Режим совместимости включен, если после имени документа в строке заголовка в верхней части окна Word указано [режим совместимости]. Чтобы преобразовать документ, выберите пункты Файл > Сведения > Преобразовать. Дополнительные сведения о режиме совместимости см. в статье Открытие документа в более ранней версии Word.

Если вы хотите добавить видео с YouTube, но этой службы нет в списке источников, нажмите кнопку YouTube в нижней части окна Вставка видео. Если вы не видите значок YouTube, убедитесь, что вы уже Office .

Примечание: Эта функция в настоящее время в настоящее время Word для Интернета и скоро станет доступна для всех пользователей.

  1. В веб-браузере найдите нужное видео и скопируйте его URL-адрес из адресной панели браузера.

  2. Переключиться на Word для Интернета и выберите в документе место, куда вы хотите разместить видео.

  3. На вкладке Вставка ленты выберите Видео из Интернета.

  4. В диалоговом окне Видео из Интернета вденем URL-адрес, который вы скопировали в шаге 1.

  5. Нажмите Вставить.

Поддерживаемые источники

Word для Интернета в настоящее время поддерживается встраив контент со следующих сайтов и служб. Число поддерживаемых источников растет; проверьте здесь, чтобы посмотреть обновленный список.

  • YouTube

  • Microsoft Stream

  • Vimeo;

  • Slideshare

  • TED Talks

  • org/ListItem»>

    Flipgrid Шорты

Устранение неполадок

Не все видео на этих сайтах разрешено внедрять. Проверьте на этих сайтах сведения о разрешении вставки для выбранных видео. 

Условия использования и политики конфиденциальности

Использование контента в Интернете подействовать на условия использования и политики конфиденциальности каждого поставщика.

Youtube

  • Условия использования

  • org/ListItem»>

    Конфиденциальности

Microsoft Stream

  • Условия использования

  • Конфиденциальности

Vimeo

  • org/ListItem»>

    Условия использования

  • Конфиденциальности

Slideshare

  • Условия использования

  • Конфиденциальности

TED Talks

  • org/ListItem»>

    Условия использования

  • Конфиденциальности

Flipgrid Шорты

  • Условия использования

  • Конфиденциальности

Как использовать видео на веб-сайтах

27 мая 2022 г. · 12 мин чтения

Видео делает веб-сайты более привлекательными и повышает их рейтинг. Узнайте, как встроить его на свой сайт, какие типы использовать и как сделать это хорошо.

На дворе 2005 год. Вы щелкаете по профилю своего друга на MySpace и — БАМ! — вот оно: полноценная слуховая атака в виде автоматически воспроизводимого видео.

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

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

Компании особенно привыкли думать о том, как лучше обучать, информировать и развлекать посетителей своих веб-сайтов.

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

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

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

  1. Содержание
  2. 1. Зачем использовать видео на веб-сайтах?
  3. 1.1 Видео на веб-сайтах может:
  4. 2. Как добавить видео на свой сайт?
  5. 2.1 Как встроить видео с собственного хостинга на веб-сайты?
  6. 2.2 Как встроить видео, размещенное на сторонних сайтах, на веб-сайты?
  7. 2.2.1 Как встроить видео Vidyard на мой веб-сайт?
  8. 2.3 В чем разница между встроенными и лайтбоксовыми встраиваниями?
  9. 3. Где я могу использовать видео на своем веб-сайте?
  10. 3.1 Видео на главной странице
  11. 3. 1.1 Рекомендуемый тип видео: Объяснение
  12. 3.2 Видео на странице продукта и/или услуги
  13. 3.2.1 Рекомендуемый тип видео: Демо
  14. 3.3 Видео с целевой страницы
  15. 3.3.1 Рекомендуемый тип видео: Промо
  16. 3.4 Видео о странице
  17. 3.4.1 Рекомендуемый тип видео: Культура
  18. Веб-сайт
  19. 3.5
  20. 3.5.1 Рекомендуемые типы видео: передовые идеи и инструкции
  21. 3.6 Видео с историями клиентов
  22. 3.6.1 Рекомендуемый тип видео: пример из практики
  23. 3.7 Видео с портала поддержки
  24. 3.7.1 Рекомендуемый тип видео: How-To
  25. 3.8 Видео на странице карьеры
  26. 3.8.1 Рекомендуемый тип видео: Культура
  27. 4. Какие рекомендации по использованию видео на веб-сайтах?
  28. 4.1 Фокус на качестве
  29. 4.2 Обратите внимание на размещение
  30. 4.3. Сборка для доступности
  31. 4.4 Go Short
  32. 4.5 Выберите взорвание Thumbnail
  33. 4.6. Be Appravive
  34. 4.7.0020
  35. 4. 8 Все тестировать

Зачем использовать видео на веб-сайтах?

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

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

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

Видео на веб-сайтах может:

  • Увеличить посещаемость веб-сайта — пользователи видео получают на 41% больше веб-трафика из поиска, чем не пользователи (Aberdeen Group)
  • Привлечение посетителей —72% людей предпочли бы использовать видео, чтобы узнать о продукте или услуге ( HubSpot)
  • Держите людей на своем сайте — средний интернет-пользователь проводит на 88% больше времени на сайте, содержащем видео (Mist Media)
  • Повышение поискового рейтинга — веб-сайты, которые эффективно используют видео, повышают вероятность ранжирование на первой странице результатов поиска Google в 53 раза (Forrester)
  • Увеличить число конверсий — Пользователи видео имеют на 34% более высокий коэффициент веб-конверсий (Aberdeen Group)

Чего вы ждете? Усильте свой сайт видео.

Простое встраивание видео на свой веб-сайт Размещайте, управляйте и встраивайте видео — быстро.

Зарегистрироваться бесплатно

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

Есть несколько способов добавить видео на свой веб-сайт. Вот что вам нужно знать о каждом варианте.

Как встроить видео с собственного хостинга на веб-сайты?

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

Чтобы добавить размещенное на собственном хостинге видео на свой веб-сайт, вы загружаете его на сервер веб-сайта так же, как и файл изображения.

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

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

Кроме того, существуют некоторые недостатки, связанные с типом файла, который не стандартизирован для разных браузеров (не все браузеры будут воспроизводить все типы видеофайлов). Это означает, что в зависимости от того, какой тип файла вы используете, некоторые посетители вашего веб-сайта могут вообще не увидеть его.

Как встроить видео, размещенное на сторонних сайтах, на веб-сайты?

Более распространенным решением для встраивания видео на ваш веб-сайт является использование стороннего сервиса или CDN (сети доставки контента).

Существует множество вариантов видеохостинга, от бесплатных до решений корпоративного уровня.

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

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

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

Как встроить видео Vidyard на мой веб-сайт?

Процесс будет выглядеть несколько иначе, если у вас есть бесплатная учетная запись Vidyard. Получите инструкции для этого в нашем Центре знаний.

  1. Найдите видео, которое хотите встроить в свою библиотеку Vidyard
  2. Нажмите кнопку Поделиться рядом с видео, чтобы открыть окно параметров общего доступа
  3. В окне нажмите кнопку , чтобы получить код для встраивания
  4. Переключить Хотите встроить это видео? Вариант включения
  5. Выберите вариант встраивания (встроенный или лайтбокс для веб-сайтов)
  6. Нажмите Скопируйте код
  7. Вставьте код для встраивания в исходный HTML-код вашего веб-сайта

Легко встраивайте видео на свой веб-сайт Быстро размещайте, управляйте и встраивайте видео.

Бесплатная регистрация

В чем разница между встроенными и лайтбоксовыми встраиваниями?

Не совсем понимаете, что отличает встроенные и лайтбоксы?

Встраиваемые видео отображают ваше видео прямо на веб-странице вместе с остальным контентом.

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

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

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

Где я могу использовать видео на своем веб-сайте?

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

Видео на главной странице

Рекомендуемый тип видео: Объяснение

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

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

Объясняющие видеоролики, предоставляющие общий обзор, идеально подходят для домашних страниц именно по этой причине. Однако они не единственный ваш выбор.

Например, если ваш бренд уже известен нарицательным (например, Coca-Cola или Toyota), вы можете использовать свою ценную недвижимость на домашней странице, чтобы выделить новый продукт или рекламную акцию.

Учитесь у профессионалов

Агентство IMPACT размещает видео в центре своего веб-сайта, размещая не одно, а два видео на главной странице. Когда посетители попадают на страницу, их встречает привлекательное фоновое видео, которое привлекает их внимание к тексту агентства. Заметная кнопка воспроизведения под основной копией предлагает им посмотреть видео, чтобы узнать больше о мантре агентства.

Видео на страницах продуктов и/или услуг

Рекомендуемый тип видео: Демо

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

Поскольку эти страницы содержат больше деталей, видео — отличный способ предоставить еще больше информации, не превращая страницу в огромную стену текста.

Демонстрационные видеоролики, которые показывают, как на самом деле работает ваш продукт, и отвечают на некоторые ключевые вопросы о нем, хороши тем, что они немного глубже погружают в детали.

Учитесь у профессионалов

Zendesk использовала фоновое видео на странице продукта для своего Support Suite, чтобы сделать страницу более живой. У них также есть кнопка «Смотреть видео», расположенная в верхней части страницы, которая запускает видео в лайтбоксе.

Видео с целевых страниц

Рекомендуемый тип видео: Рекламные ролики

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

Добавление видео на целевые страницы может повысить конверсию.

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

Учитесь у профессионалов

Для наших информационных кампаний о продуктивности с использованием видеосообщений команда Vidyard выбрала главное видео на целевой странице.

Видео о странице

Рекомендуемый тип видео: Культура

На странице «О компании» посетители могут узнать, что представляет собой ваша компания, кто ею руководит и каковы ваши ценности.

Эта страница дает возможность поделиться с посетителями личностью вашей организации, а видео как никогда упрощает передачу этого человеческого элемента.

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

Учитесь у профессионалов

U.S. Waterproofing, компания, занимающаяся гидроизоляцией подвалов и ремонтом фундаментов, дает посетителям веб-сайта возможность познакомиться с семьей, стоящей за семейным бизнесом, в видеоролике на странице «О нас».

Видео в блогах на веб-сайтах

Рекомендуемые типы видео: Интеллектуальное лидерство и инструкции

Все блоги посвящены обучению людей. Видео — отличный инструмент обучения. (Да, действительно: зрители запоминают больше сообщения, когда смотрят его в видео, чем в тексте.)

Это союз, заключенный на небесах.

Чтобы развлечь людей, пока вы их информируете, рассмотрите возможность использования различных типов видео. Два из них, которые работают лучше всего, — это идейное лидерство и инструкции.

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

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

Учитесь у профессионалов

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

Видео с историями клиентов

Рекомендуемый тип видео: Практический пример

Истории клиентов — это хлеб с маслом в середине воронки продаж — они есть практически у каждого бренда.

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

Видео с примерами из практики, которые рассказывают истории ваших клиентов, — отличный способ добавить аутентичности и достоверности вашим историям клиентов. Письменная цитата может быть подделана. Свидетельство от реального человека, которого они могут видеть, не может (по крайней мере, нелегко).

Учитесь у профессионалов

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

Видео портала поддержки

Рекомендуемый тип видео: How-To

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

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

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

Учитесь у профессионалов

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

Видео со страницы вакансий

Рекомендуемый тип видео: Культура

Страницы вакансий предназначены для привлечения и найма самых лучших кандидатов для работы в вашей компании.

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

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

Учитесь у профессионалов

Технологическая компания электронной коммерции Shopify размещает своих сотрудников — многие из которых также имеют магазины через платформу — в центре внимания на странице «Карьера» тематическое видео.

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