Вставить видео html5 на сайт: Как вставить видео в HTML

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

• Скачать
• 300+ Функций
• Конструкторы сайтов
• Премиум
• Форумы
• Блог
• Help

• RU
• Войти
• Зарегистрироваться

1. Главная
2. Функции
3. Элементы веб-страницы
4. Видео Элемент

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

Скачать для Windows Скачать для Mac

Просмотр по категориям функций

Элементы веб-страницы

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

Визуальный редактор страниц

Элементы дизайна

Медиа библиотеки

Свойства элемента

Отзывчивый

Эффекты анимации

Настройки темы

Форма обратной связи

Верхний и нижний колонтитулы

Блог

Электронная торговля

SEO

Пользовательский код

Особенности приложения

Свойства сайта и страницы

Виджеты WordPress

Your browser does not support HTML5 video.

URL-адрес видео

Video footages are very popular on modern websites, and it is also popular to host those videos on popular video services like YouTube and Vimeo. You can add the Video Element from the Add Menu and specify the Video URL in the Editor by clicking the Change Video icon and the Property Panel by entering the URL from YouTube or Vimeo in the corresponding property.

Узнать больше

Загрузка видео

Помимо популярных сегодня видеосервисов, вы можете загрузить собственное видео на веб-сайт, хранящийся в папке Madia. Обратите внимание, что размер вашего видео не должен превышать 10 МБ. Добавьте элемент Vidoe из меню «Добавить». Выберите параметр «Загрузить видео» в редакторе или на панели свойств и загрузите свое видео. Также обратите внимание, что эта опция позволяет вам управлять ранее загруженными видео на панели свойств для текущего видео.

Узнать больше

Your browser does not support HTML5 video.

Your browser does not support HTML5 video.

Видео затенение

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

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

Узнать больше

Подгонка видео

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

Узнать больше

Your browser does not support HTML5 video.

Your browser does not support HTML5 video.

Параметры видео

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

Узнать больше

Видео постер

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

Узнать больше

Your browser does not support HTML5 video.

Бесплатные шаблоны с Видео элемент

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

• Новейшие Технологии Для Наушников Форма Обратной Связи

• Хорошие Бизнес-Идеи Шаблон Целевой Страницы

• Интерьерная Мастерская Недвижимость

• Работайте Вместе Красиво Бизнес-Консультирование

• Эффективные Цифровые Коммуникации Загрузка HTML-Шаблона

• Приготовление Вкусной Еды Отзывчивый Сайт

• Природа Вода Море Адаптивный HTML-Шаблон

• История Звездных Войн Шаблон HTML-Страницы

• Природные Ландшафты И Острова Шаблоны Сайтов

• Мы Создаем Цифровые Продукты Шаблоны Сайтов

• Создайте свой собственный сайт

  Скачать

• Мэй Выигрывает Лучшую Песню Карты Гугл

Learn How To Add the Video Element

In Nicepage, you can control any element. If you want to embed videos proceed to the add element menu in the application or online version, scroll the elements side list till you see the video, and click on it (Add Elements — Video — Add). For the responsive video element, you will see various blocks and presets with the pre-arrange video element position. Blocks can have videos as the video background, or as a separate block for which, same as an image element, you can change the size, position, and transparency. On the right side, where you see a default video URL, you can add a video link to your Vimeo element from its video hosting, a youtube video, or embedding video using a cloud hosting link from personal accounts.

Make sure to check how do videos display in various versions of your site and how do the title and media information visibility affect the overall view. So, how uploaded video in video element uses its basic settings? After adding the youtube element link or a link from other video hostings, you can loop video, make it automatically start when a visitor enters the page, mute video if the sound will distract visitors, or show controls color and other settings, which visitors might require to skip the content or adjust it.

Thoroughly research the terms & conditions of the web hosting which video file you are about to use. The terms of service of the video hosting may contain conditions to the display videos, hints on how to set video on your own site, or how to find creative commons videos you can use. Your own terms of service and support policy must always refer to, WordPress hosting, for example, that keeps your video file.

Просмотр видео в письме — возможно ли это?

• CRM-маркетинг
• CRM-игры
• Кейсы
• Портфолио
• Блог
  • Статьи
  • Заметки
  • Инфографики
  • Методички
  • Справочник
  • Сервисы

Просмотр видео в письме может привлечь внимание подписчиков и решить много других проблем. Например, в видео можно показать, как пользоваться товаром или сервисом, или сделать обзор на продукт. Но много ли людей смогут увидеть такую фишку? Давайте разберёмся.

Раньше в письма можно было вставлять видео с Youtube и Vimeo — прописывая прямую ссылку на видеоролик. Это был отличный вариант, который работал в веб-интерфейсах Mail.ru и Gmail — что давало неплохой охват аудитории. Однако теперь это не работает.

На сегодняшний день наиболее очевидный вариант размещения видео в письме — это использование html5-тега <video>:

<video poster="http://yoursite/img/backup_bunny2.jpg" controls="controls">
	<source type="video/mp4" src="http://yoursite/img/mov_bbb.mp4"></source>
	<source type="video/ogg" src="http://yoursite/img/mov_bbb.ogg"></source>
	<source type="video/webm" src="http://yoursite/img/mov_bbb.webm"></source>
	<a href="http://yoursite/link.html"><img src="img/backup_bunny2.jpg" /></a>
</video>

Но, к сожалению, такой вариант будет работать лишь в некоторых почтовых клиентах — Thunderbird, Apple mail, Mail на iOS. Остальные же почтовики покажут альтернативный контент, который вы пропишите в теге <video>. В вышеупомянутом примере это картинка со ссылкой:

<a href="http://yoursite/link.html"><img src="img/backup_bunny2.jpg" /></a>

По итогу охват получается совсем небольшой, поэтому мы не рекомендуем использовать html5-тег <video>, если только все ваши подписчики не сидят исключительно в Thunderbird, Apple mail, Mail на iOS 🙂

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

Такую имитацию видео с Ютуба использовали, например, Kia в своём письме:

Конвертировать видео в гифку можно, например, в After Effects или Photoshop. Правда, во втором случае объём файла будет больше, а качество хуже. Значок воспроизведения можно наложить в том же After Effects. Для этого сохраните его в формате png с прозрачным фоном.

After Effects — программное обеспечение для создания анимационной графики и визуальных эффектов.

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

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

Читать предыдущую версию статьи

25 ноября 2014

5 мин.

C появлением таких сервисов, как Youtube и Vimeo, и таких направлений, как видеоблоги, вебинары и т. д., видео стало неотъемлемой составляющей глобальной сети и емейл-рассылок в частности.
В статье я разберу три способа, как разместить видеоконтент в теле письма. Кстати, примеры с HTML5-кодом можно копировать и вставлять в вёрстку, внося небольшие изменения.

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

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

Это можно реализовать на HTML5:

<video poster="http://yoursite/img/backup_bunny2.jpg" controls="controls">
	<source type="video/mp4" src="http://yoursite/img/mov_bbb.mp4"></source>
	<source type="video/ogg" src="http://yoursite/img/mov_bbb.ogg"></source>
	<source type="video/webm" src="http://yoursite/img/mov_bbb.webm"></source>
	<a href="http://yoursite/link.html"><img src="img/backup_bunny2.jpg" /></a>
</video>

• параметры width и height отвечают за ширину и высоту видеоблока;
• poster — стоп-кадр, который показывается до запуска видео;
• controls добавляет панель управления к видеоролику.

К сожалению, просмотр HTML5-видео в письме поддерживают не все почтовые клиенты и веб-интерфейсы почтовых провайдеров. Например, Mail.ru и Gmail.com покажут альтернативный контент в виде изображения и ссылки в нашем случае. Чтобы посмотреть видео, подписчику придётся перейти из письма на сайт.

 
<a href="http://yoursite/link.html"><img src="img/backup_bunny2.jpg" /></a>

Чтобы не заставлять пользователя совершать лишние действия, разместите видео на слое. Для этого повесьте ссылку ролика на изображение, а само видео залейте на Youtube. Отмечу, что Mail.ru показывает видео не только из Youtube, но и из Vimeo.

Для наибольшего охвата аудитории совместите оба подхода:

<video poster="img/backup_bunny2.jpg" controls="controls">
	<source type="video/mp4" src="img/mov_bbb.mp4"></source>
	<source type="video/ogg" src="img/mov_bbb.ogg"></source>
	<source type="video/webm" src="img/mov_bbb. webm"></source>
	<a href="http://www.youtube.com/watch?v=YE7VzlLtp-4"><img src="img/backup_bunny2.jpg" /></a>
</video>

Для подсчёта кликов и наглядной статистики рассылки ESP экранирует прописанные в теле письма ссылки. В этом случае ссылка на Youtube не будет распознана и не откроется.

Чтобы этого избежать, отключите отслеживание кликов в платформе. Ссылка останется прямой и корректно откроется на слое в веб-интерфейсе Mail.ru и Gmail.com.

Gmail.com

Mail.ru

Где поддерживается

Компания Apple никак не определится со своими взглядами на тег HTML5 <video>. В версиях до iOS 7 включительно он был им люб, но в iOS 8 и iOS 9 перестали поддерживать. В последних версиях iOS 10 и iOS 11 его поддержку вернули.

У iOS 10/11 есть одна особенность — в качестве превью не отображается первый кадр видео, как это сделано в предыдущих версиях. Чтобы задать превью видео, используйте атрибут poster (poster="").

iOS 7:

iOS 10/11:

Наименование	Поддержка
Gmail
Mail.ru
Rambler
Yandex
Outlook.com
Yahoo
Outlook (2003, 2007, 2010, 2013)
Mozilla Thunderbird
Apple Mail
Mail (iOS)
Почта (Android)
Gmail (iOS, Android)

Итоги

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

• Ваша цель: привлечь трафик на сайт. Используйте классический подход — разместите в теле емейл-сообщения изображение на видео с ссылкой на сайт.
• Ваша цель: рост лояльности подписчиков. Проследите, чтобы видео проигрывалось в теле письма. Для этого используйте HTML5-видео или видео на слое (Mail.ru, Gmail).Ограничение этого метода одно, но существенное — вы не сможете собрать корректно статистику по переходам из емейла.
• Ваша цель: привлечь подписчиков в ваш Youtube-канал. Не выключайте сбор статистики в ESP или вместо прямой ссылки вставьте сокращённую. Видео не будет проигрываться на слое, а перекинется в Youtube.

Понравилась идея?

Реализуем её в вашем письме. Обращайтесь!

Корпоративный email *

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

Подписаться на рассылку

Я согласен с Политикой обработки персональных данных.

Как встроить HTML5-видео в WordPress

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

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

Эти преимущества могут побудить вас немедленно отобразить видео в WordPress. Вы можете добавлять видео на свои страницы или в сообщения двумя распространенными способами: встраивая ссылку на Youtube или загружая видео со своего компьютера.

Знаете ли вы о другом варианте использования проигрывателя HTML5 для добавления видео на ваш сайт WordPress? Поскольку вы сами владеете видео без стороннего помощника, вам проще управлять правами доступа к файлам.

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

Зачем использовать видеоплеер HTML5

#1 Ограничения на загрузку видео в WordPress

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

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

#2 Сторонние платформы видеохостинга

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

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

#3 Преимущества по сравнению с Flash-плеерами

По сравнению со старыми Flash-плеерами использование HTML-плеера дает больше преимуществ для ваших видео WordPress.

• Большинство видеопроигрывателей HTML5 поддерживают большинство браузеров, включая Firefox, Chrome, Internet Explorer, Safari и Opera.
• Благодаря проигрывателям HTML добавление ссылок на ваши видео стало еще проще. Вы можете продвигать другие продукты или предоставлять пользователям дополнительную информацию.
• Настраивать базовые элементы видео, такие как градиенты, отражения и границы, очень просто. Кроме того, вы можете изменить анимацию и эффекты перехода.

Как добавить видео HTML5 на ваш сайт WordPress

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

Protect WordPress Videos & Audios, мощное расширение Prevent Direct Access Gold (PDA Gold), похоже, является более комплексным решением.

Преимущества использования Protect WordPress Videos & Audios по сравнению с другими проигрывателями HTML5

 

• Загружайте и защищайте собственные видео на WordPress

Как следует из названия, Protect WordPress Videos & Audios не только поставляется со стандартным видеоплеером HTML5, но также помогает защищать видеофайлы. Вместо того, чтобы отображать ссылку для загрузки при встраивании видео в ваш контент, вы можете показывать живое видео.

• Защита потокового видео HTTP Live

Защита видео и аудио WordPress также поддерживает видео размером более 100 МБ без использования флэш-памяти. Вы можете использовать метод HLS (HTTP Live Streaming) и размещать свои большие видео на Amazon S3. В результате это не уменьшит время загрузки вашей страницы и не займет пропускную способность вашего хостинг-сервера.

• Срок действия защищенных ссылок видео

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

Поскольку Protect WordPress Videos & Audios — это просто расширение Prevent Direct Access Gold, вам необходимо установить как основной плагин, так и надстройку, чтобы он работал правильно. Вы можете обратиться к тому, как установить плагин PDA Gold и его расширение в этой документации.

Существует 4 различных способа защитить ваши видео WordPress с помощью Protect WordPress Videos & Audios, включая видео, размещенные на собственном хостинге, видео HLS, видео Techsmith и видео, размещенные на Amazon S3.

#1 Безопасный хостинг видео на WordPress

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

Защита видео с помощью панели инструментов редактора

• Классический редактор

1. Переход к страницам, сообщениям или пользовательским типам сообщений, в которые вы собираетесь вставить видео
2. Щелкните значок Защита видео и аудио WordPress на панели инструментов
   
3. Выберите видео, которое вы хотите защитить от всплывающего окна плагина. При необходимости отрегулируйте ширину и высоту видео
   
4. Нажмите кнопку «Вставить видео»

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

Редактор Gutenberg

Вы используете на своем сайте редактор Gutenberg, а не классический? Вот как использовать плагин с этим компоновщиком страниц:

1. Создайте новый или отредактируйте существующий пост
2. Найдите и добавьте в контент блок «Защищенное видео»
   
3. Нажмите Добавить медиафайл , затем выберите нужный видеофайл и защитите его
   

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

Защита видео с помощью шорткода

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

 [*protected_video mp4="Введите URL-адрес видео/аудио здесь"id="897798" autoplay="true" poster="URL-адрес изображения вашего постера" video_id=888] 

Не забудьте заменить video_id=888 собственным идентификатором видео. Вы можете получить этот номер прямо в URL-адресе видео в медиатеке WordPress. Например https://pda.com/wp-admin/post.php?post=888&action=edit .

#2 Защитите видео, размещенные на Amazon S3

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

В приведенном ниже руководстве показано, как защитить видео S3 менее чем за 5 минут:

1. Создайте частную корзину S3. Для этого вам необходимо войти в консоль AWS
2. Настройка распространения Cloudfront
3. Перейдите в корзину и нажмите на название видео, чтобы получить ссылку S3. Например, https://s3-ap-southeast-1.amazonaws.com/my-bucket/my-private-video.mp4
4. Скопируйте следующий шорткод и вставьте в свой контент

Для получения дополнительной информации о двух других методах защиты потокового вещания HTTP (HLS) в формате HTML5 и видео TechSmith Camtasia см. подробную документацию.

Теперь ваши личные видео и аудио защищены!

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

Расширение Protect WordPress Videos & Audios, работающее с его основным плагином Prevent Direct Access Gold, позволяет вам контролировать, кому разрешено их просматривать. Поскольку никто не может получить URL-адреса ваших видеофайлов или загрузить их, вам не нужно беспокоиться о мошенничестве с видео и проблемах с обменом.

Установите PDA Gold и защитите видео и аудио WordPress, чтобы ваши видео были защищены уже сегодня!

Как встроить облачный видеоплеер на свой сайт или в приложение

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

На этой странице:

• Встроить базовый видеоплеер
• Общие методы и свойства видеоплеера
• Активное создание URL-адресов видеоплеера

Вы можете использовать собственный проигрыватель, включив библиотеку JavaScript Cloudinary Video Player, что даст вам полный контроль над всеми вашими экземплярами видеопроигрывателя. Кроме того, вы можете встроить проигрыватель, размещенный в облаке, с помощью iframe. Вы можете легко сгенерировать код для индивидуального проигрывателя с помощью Cloudinary Video Player Studio или создать его самостоятельно.

Собственный плеер

Встраивание собственного проигрывателя с помощью библиотеки Cloudinary Video Player на основе JavaScript требует дополнительных настроек и настроек, чем использование облачного проигрывателя. Также требуется, чтобы библиотека была включена в ваш веб-сайт или приложение. Использование библиотеки видеоплеера дает вам больше контроля над плеером и воспроизведением. Мы рекомендуем использовать этот метод встраивания, если у вас есть несколько экземпляров проигрывателя, вам необходимо программно управлять воспроизведением и событиями или у вас есть дополнительные требования к настройке.

1. Включите соответствующие файлы CSS и JS для видеопроигрывателя и JavaScript SDK

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

Например, сюда входит стандартный уменьшенный пакет с сайта unpkg.com:

Подробные сведения обо всех параметрах см. в разделе Установка и настройка

2. Встройте видеоплеер, добавив элемент тега видео с классом видеопроигрывателя

Создайте тег видео как минимум с классом cld-video-player и значение id . Вы также можете включить стандартные атрибуты видеоплеера HTML5.

3. Создайте экземпляр видеоплеера Cloudinary

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

или

Чтобы использовать библиотеку Cloudinary Video Player, вы должны настроить как минимум имя_облака . Вы можете дополнительно определить ряд необязательных параметров конфигурации. Например, если вы являетесь пользователем расширенного плана с частной CDN и настраиваемым CNAME, вы можете установить для параметра private_cdn значение true и настроить параметр cname в соответствии с вашими настройками. Это гарантирует, что видеопроигрыватель доставляет ваши видео, используя правильные URL-адреса.

Вы устанавливаете параметры конфигурации при создании нового плеера, например:

Или для частного CDN и пользовательского дистрибутива:

Если вы планируете добавить на свою страницу несколько проигрывателей с одинаковой конфигурацией, вы можете использовать метод videoPlayers . Например, можно указать разные общедоступные идентификаторы видео для каждого тега . В этом случае нет необходимости определять атрибуты id для тегов , поскольку вы можете ориентироваться на класс cld-video-player . Как и в случае создания экземпляра одного игрока, вы можете дополнительно добавить параметры конструктора.

4. Укажите видео для воспроизведения и дополнительные настройки проигрывателя

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

Вы можете дополнительно указать некоторые параметры, такие как общедоступный идентификатор видео или URL-адрес видео, преобразования видео и источник постера для каждого видеоисточника, используя videoPlayer. source (или атрибут data-cld-source в теге ), а затем установите разные значения для этих параметров для каждого воспроизводимого видеоисточника.

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

Для тега все специальные конфигурации видеоплеера Cloudinary имеют префикс data-cld-. Стандартные атрибуты видео HTML5 указываются как обычно.

Пример 1. Указание общедоступного идентификатора в теге

Пример 1. Указание общедоступного идентификатора в теге :

Пример 2. Указание общедоступного идентификатора в методе videoPlayer :

Пример 3. Указание видео в качестве URL-адреса в методе videoPlayer :

Пример 4: Указание нескольких типов источников :

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

Рекомендации по оптимальной производительности

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

• Используйте легкий пакет, если вы не используете потоковую передачу с адаптивным битрейтом, видеорекламу или функции видео с возможностью покупки.
• Убедитесь, что ваша страница загружает библиотеки видеопроигрывателя и HTML в следующем наиболее оптимальном порядке:
  1. Таблица стилей видеоплеера
  2. HTML для элемента видео
  3. Библиотеки Cloudinary Core и Video Player JavaScript.
  4. JavaScript для настройки видеоплеера.
• Используйте класс cld-fluid для адаптивного изменения размера проигрывателя. Это следует использовать поверх любого метода настройки JS, чтобы предотвратить нежелательное изменение размера проигрывателя.

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

Облачный проигрыватель

Облачный проигрыватель использует iframe для добавления экземпляра проигрывателя на вашу страницу. . Сам плеер размещен на Cloudinary и может быть легко настроен и настроен. Вы можете разработать и настроить свой проигрыватель с помощью Cloudinary Video Player Studio, а затем скопировать и вставить код iframe, который он сгенерирует для вас. Кроме того, вы можете настроить код iframe вручную, как описано ниже. Мы рекомендуем использовать этот метод, если вы не хотите размещать видеоплеер самостоятельно и хотите добавить отдельные предварительно настроенные видеоплееры на свой веб-сайт или в приложение.

Вот простой пример того, как может выглядеть код iframe видеоплеера:

Вот как написать свой собственный облачный плеер:

1. Добавьте iframe на свою страницу или в приложение

Добавьте