Видеоплеер html5 для сайта: Плеер для сайта HTML5 — 15 отличных решений

Leave a Comment / Html / By /

Топ 5 Open Source HTML5 видеоплееров на 2018 год

С появлением в HTML5 тегов <video> и <audio> медиафайлы стали по-настоящему доступными для Интернета.

За короткий срок стандарт HTML5-видео заменил Flash Player и аналогичные сторонние медиаплееры. Ранее, для корректного запуска медиафайлов требовалось приложить немало усилий. Для воспроизведения мультимедиа зачастую нужно было использовать теги <embed> и < object> с внушительным списком параметров.

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

<video src=”url” width=”640px” height=”380px” autoplay/>

Почему стоит выбирать плеер с открытым исходным кодом?

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

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

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

Среди дополнительных преимуществ можно выделить следующие:

Бесплатное использование

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

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

Малое количество ошибок и их быстрое исправление

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

Возможность кастомизации

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

Неограниченная поддержка

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

Топ 5 плееров с открытым исходным кодом

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

Plyr

Plyr — это простой HTML5, Vimeo и YouTube медиаплеер, который поддерживает все современные браузеры. Он легковесный, удобный и настраиваемый. При установке плеера через NPM с помощью команды npm install plyr вы получите полный исходный код приложения.

 

Ниже приведены примеры кода для HTML5 аудио и видео —

HTML5 Audio
<audio id=”player” controls>
 <source src=”/path/to/audio.mp3" type=”audio/mp3">
 <source src=”/path/to/audio.ogg” type=”audio/ogg”>
</audio>
HTML5 Video
<video poster=”/path/to/poster.jpg” id=”player” playsinline controls>
 <source src=”/path/to/video.mp4" type=”video/mp4">
 <source src=”/path/to/video.webm” type=”video/webm”>
 
 <! — Captions are optional →
 <track kind=”captions” label=”English captions” src=”/path/to/captions.
 
 vtt” srclang=”en” default>
</video>

Video.js

Video.js — видеоплеер, созданный с использованием HTML5. Он поддерживает HTML5 и Flash видео наряду с Vimeo и YouTube. Воспроизведение видео возможно как на десктопах, так и на мобильных устройствах. Плеер Video.js появился в 2010 году и в настоящее время активно применяется более чем на 200 000 веб-сайтах.

Вы можете бесплатно использовать CDN версию Video.js, добавив следующие теги в <head>документа:

<link href=”//vjs.zencdn.net/7.0/video-js.min.css” rel=”stylesheet”>
<script src=”//vjs.zencdn.net/7.0/video.min.js”></script>

Чтобы поместить видео на страницу, достаточно лишь создать элемент <video> с дополнительным атрибутом data-setup. Как минимум, этот атрибут должен иметь значение ‘{}’, но он также может включать в себя любые параметры Video.js, при условии, что они представляют собой корректный JSON, как показано ниже —

<video
 id=”my-player”
 class=”video-js”
 controls
 preload=”auto”
 poster=”//vjs. zencdn.net/v/oceans.png”
 data-setup=’{}’>
 <source src=”//vjs.zencdn.net/v/oceans.mp4" type=”video/mp4"></source>
 <source src=”//vjs.zencdn.net/v/oceans.webm” type=”video/webm”></source>
 <source src=”//vjs.zencdn.net/v/oceans.ogv” type=”video/ogg”></source>
 <p class=”vjs-no-js”>
 To view this video please enable JavaScript, and consider upgrading to a web browser that
 <a href=”http://videojs.com/html5-video-support/” target=”_blank”>
 supports HTML5 video
 </a>
 </p>
</video>

Как только страница загрузится и появится этот элемент, Video.js автоматически установит плеер на страницу.

Afterglow

 

Afterglow является инструментом, который позволяет создать полностью отзывчивый видеоплеер при помощи различных HTML5 видеоэлементов, прикладывая минимальные усилия.

Afterglow имеет очень простой процесс инициализации и поддерживает различные качества видеоизображения —

!DOCTYPE html>
<html>
 <head>
 <title>afterglow player</title>
 <script type=”text/javascript” src=”//cdn. jsdelivr.net/afterglow/latest/afterglow.min.js”></script>
 </head>
 <body>
 <video class=”afterglow” id=”myvideo” width=”1280" height=”720">
 <source type=”video/mp4" src=”/path/to/myvideo.mp4" />
 </video>
 </body>
<html>

MediaElement.js

MediaElement.js — это HTML5 видео и аудио плеер с поддержкой Flash и Silverlight, который имитирует HTML5 MediaElement API и предоставляет одинаковый UI для всех браузеров.

Вместо того, чтобы отображать HTML5-плеер для современных браузеров и Flash-плеер для старых браузеров, MediaElement.js просто обоновляет его, используя пользовательские плагины Flash и Silverlight, имитирующие HTML5 MediaElement API.

Полное руководство по установке MediaElement.js доступно на сайте в разделе “Installaton”, а краткое описание по созданию и использованию MediaElement — в разделе “Usage”. Чтобы посмотреть дополнительные функции, вы можете обратиться к их репозиторию на GitHub.

jPlayer

 

jPlayer —это бесплатная медиа-библиотека с открытым исходным кодом, написанная на JavaScript.

jPlayer позволяет быстро внедрить кроссплатформенные аудио и видео на веб-страницы при помощи jQuery плагина. Всеобъемлющий API-интерфейс jPlayer позволяет создавать инновационные медиа-решения. jPlayer поддерживается активным open source сообществом разработчиков.

jPlayer имеет отличный PHP-пакет, который можно установить с помощью Composer. Для этого нужно добавить следующие строки в composer.json вашего проекта:

// …
“require”: {
 // …
 “happyworm/jPlayer”: “2.*”
 // …
}
// …
“config”: {
 “component-dir”: “your/desired/asset/path”
},
// …

После этого нужно будет выполнить команду:

php composer.phar update

Composer загрузит все компоненты и установит необходимые файлы в определенную директорию.

Дополнительные видеоплееры, о которых вам стоит знать

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

Cloudinary

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

Тем не менее видеоплеер Cloudinary выделяется среди остальных тем, что он предлагает кодирование и обработку видео, а также услуги хостинга для ваших видеоматериалов.

Все трансформации с видео происходят на лету на уровне плеера. Интеграция на сайт организации происходит очень просто при использовании embed кода.

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

JW Player

С некоторых пор JW Player стал поддерживать воспроизведение HTML5 видео. Этот плеер полностью настраиваемый. Он обеспечивает отзывчивость видео на странице и содержит множество функций: от доступа к аналитике до полного управления HTML5 видео.

JW Player уникален в качестве HTML5 видеоплеера для WordPress сайтов. Он также является альтернативным вариантом для видеоплеера Youtube. Кроме того, JW Player поддерживает ряд пользовательских тем. Его многочисленные плагины совместимы с наиболее популярными CMS, что делает интеграцию довольно легкой и быстрой.

HTML5 видеоплеер Kaltura

Kaltura Player — это бесплатный HTML5 видеоплеер с открытым исходным кодом, используемый для создания настраиваемых скинов для разных устройств или браузеров. Скины могут соответствовать дизайну вашего веб-сайта либо дополнять его. Некоторые ключевые особенности плеера Kaltura:

1. Мультиплатформенная поддержка

2. Широкая функциональность

3. Поддержка рекламы и аналитики

Заключение

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

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

 

Перевод статьи Manjunath M: 5 Open Source HTML5 Video Players for 2018

Читайте также

Вставка видео в видеоплеер (HTML+CSS)

Программирование на Python для начинающих

Бесплатный курс по Python даст Вам всю необходимую базу для начала программирования на языке Python. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.

Чтобы получить Видеокурс,

заполните форму

E-mail:
Имя:

Другие курсы

5 шагов и профессиональный сайт готов

После семинара:

— Вы будете иметь чёткий план действий.

— Вы сможете начать создавать сайт.

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

Записаться

Другие курсы

Делай то, что в жизни тебе даётся легко, и делай это изо всех сил.

Неизвестный

На этом уроке мы разберем, как вставить видео в кастомном видеоплеере на HTML страницу. В качестве импровизированного видеоплеера, будет использовано изображение Smart TV.

Для работы нам потребуется изображение Smart TV и сам видеоролик. Для эксперимента, вы можете совершенно бесплатно скачать любое видео на сервисе http://www.coverr.co

.

Для лучшего понимания, пока вставим видео на сайт без картинки TV. Сделать это очень просто. Для добавления на HTML страницу видео, существует два тега: video и source. Атрибут controls добавляет элементы контроля для встроенного плеера. В разных браузерах встроенные плееры выглядят по разному. Надо иметь ввиду, что большинство браузеров поддерживают формат MP4. Если подключается только один формат видео, то указываем его сразу в теге video.

<video src="example.mp4" controls>></video>

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

<video controls>
     <source src="example. mp4" type="video/mp4">
    <source src="example.avi" type="video/avi">
</video>

Создадим flex-контейнер для элементов — секцию с классом smart_tv. Внутри секции поместим два flex-элемента:

  • видеоплеер (изображение телевизора)
  • видеоролик (тег video с элементами управления controls)
<section>
    <div>
        <img src="smart-tv.png" alt="">
        <video src="training-cyclist.mp4" controls>
        </video>
    </div>
</section>

Обнуляем поля и отступы для всех элементов

*{
    margin: 0;
    padding: 0;
}

Сделаем изображение TV адаптивным.

img{
    max-width: 100%;
    height: auto;
}

Зададим высоту секции на весь экран, отцентрируем все флекс-элементы.

.smart_tv{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    position: relative;
}

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

.player{
    width: 100%;
    max-width: 800px;
    position: relative;
}

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

.player video{
    position: absolute;
    width: 92.0%;
    height: 82.1%;
    top: 2.4%;
    left: 1.8%;
    background: #000;
}

Демонстрация работы видеоплеера

Если Вам интересно узнать, как создать и заработать на собственной веб-студии? Тогда обязательно получите доступ к моей уникальной системе

«Своя Web-студия за 55 дней».

  • Создано 06.04.2020 10:57:13
  • Михаил Русаков
Предыдущая статьяСледующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov. ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Топ-5 лучших видеоплееров HTML5 для прямой трансляции и видео по запросу в 2023 году | by Jamil Goura

Опубликовано в

·

Чтение: 4 мин.

·

11 апреля 2019 г. 23

Девять лет назад Стив Джобс написал открытое письмо Adobe о Flash и о том, почему он не разрешен на устройствах iOS, с перечислением различных недостатков, которые Flash показал на мобильных устройствах. С тех пор Flash пришел в упадок и был заменен HTML5.

В HTML5 разрешены функции встраивания аудио и видео с помощью тегов

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

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

#1 VPlayed — проигрыватель HLS для потоковой передачи видео и аудио

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

VPlayed легко настраивается, а также масштабируется до более чем миллиона зрителей одновременно. Его UI / UX был разработан с учетом эстетики зрителя, развивая чрезвычайно интуитивно понятный и отзывчивый дизайн. VPlayed выдвинулся на передний план среди аудио- и видеоплееров HTML5, совместимых с устройствами Android и iOS.

Характеристики:

  1. Адаптивная потоковая передача битрейта
  2. Совместимость с несколькими форматами
  3. Методы монетизации
  4. Более быстрое воспроизведение и прямая трансляция
  5. Мультибитрейтное HD-кодирование

#2 VideoJS — Пользовательский HTML5-видеоплеер

Один из лучших HTML5-видеоплееров. несколько сторонних плагинов, таких как Google Analytics, расширенная поддержка форматов, таких как HLS и DASH, списки воспроизведения, плагины для брендинга и т. д. решение с великолепным потенциалом настройки и расширяемой поддержкой YouTube и Vimeo. Хотя это в первую очередь видеоплеер HTML5, его серверная часть также содержит дополнительную поддержку Flash для версий браузера, которые не поддерживают HTML5.

Особенности:

  1. Поддержка плагинов
  2. Аналитика
  3. Поддержка списков воспроизведения
  4. Потенциал брендинга
  5. Простая настройка и широкие возможности настройки

#3 Contus Vplay — лучший онлайн-видеоплеер для потоковой передачи

Contus Vplay is первоклассный видеоплеер HTML5 для предприятий и стартапов. С Contus Vplay вы можете создать собственный видеоплеер HTML5, который поддерживает потоковое видео в реальном времени, OTT, видео по запросу и другие многофункциональные решения для ваших потребителей.

Благодаря сквозному шифрованию для расширенной безопасности эта платформа обеспечивает масштабируемую и безопасную доставку на любое устройство, будь то Android, iOS или веб-сайты. Contus Vplay предлагает продуманные модели распространения и монетизации видео, которые обнаруживают предпочтения видео и модели просмотра, чтобы максимизировать охват и прибыль.

Функции

  1. Адаптивная потоковая передача битрейта
  2. Транскодирование в облаке
  3. Настраиваемый стек и пользовательский интерфейс/UX
  4. Потоковая передача HLS и HTML5

#4 JWPlayer — видеопроигрыватель HTML5 с адаптивной потоковой передачей

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

Они также предоставляют SDK для iOS и Android для целевых пользователей мобильных устройств. Их простой и эффективный пользовательский интерфейс / UX делает потоковое видео быстрее и намного надежнее, и у них есть несколько методов монетизации для своих клиентов для получения дохода.

Особенности:

  1. HLS и DASH Adaptive Streaming
  2. Облачный хостинг
  3. Множественные методы монетизации

#5 PLYR.IO — онлайн-медиаплеер

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

Plyr совместим с HTML5 для всех форматов (аудио и видео) и всех платформ (Android, iOS и веб-сайт). Кроме того, он имеет встроенную поддержку воспроизведения видео с YouTube и Vimeo, а также варианты монетизации для получения дохода, что делает его потрясающим онлайн-видеопроигрывателем HTML5 для веб-сайтов.

Особенности:

  1. Нет зависимости
  2. Многоэкранные совместимые
  3. Открытые и высоко настраиваемые
  4. YouTube и Vimeo Video Playback

Видеопроигрыватель HTML5 с HLS и преобразованием видео

Последнее обновление: 27 апреля 2023 г.

Cloudinary Video Player — это видеопроигрыватель HTML5 на основе JavaScript, который имеет множество ценных возможностей настройки и интеграции и готов к монетизации и аналитике. Плеер полностью адаптирован для использования на любом устройстве или экране любого размера и интегрирован с решением Cloudinary для доставки и преобразования видео.

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

  • Живой пример
  • Возможности видеоплеера
  • Установка и настройка
  • Образцы видеоплеера

В этом руководстве описывается облачный видеоплеер версии 1.9.9 .

Недавно выпущенный

  • Ленивая автоматическая загрузка подключаемого модуля DASH, что уменьшает размер стандартного пакета.
  • Используйте древовидную структуру для явной загрузки подключаемого модуля DASH при импорте видеопроигрывателя в виде модуля.
  • Оцените новую функцию интерактивного видео (бета-версия).
  • Показывать миниатюры содержимого при использовании панели поиска, добавляя миниатюры поиска.
  • Укажите источник видео как необработанный URL.
  • Выберите качество вручную при использовании потоковой передачи с адаптивным битрейтом.

Вы можете найти примеры всех новых функций на странице Cloudinary Video Player Samples.

См. также :

  • Справочник API видеоплеера
  • Преобразование видео

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

Кроме того, спроектируйте и настройте свой видеоплеер с помощью Cloudinary Video Player Studio.

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

Видеоплеер Cloudinary — это многофункциональный видеоплеер на основе HTML5. В этом разделе кратко изложены его основные функции.

  • Поддержка адаптивного устройства : Проигрыватель веб-просмотра предназначен как для настольных, так и для мобильных веб-браузеров на широком спектре устройств. Внешний вид плеера подстраивается под размер экрана.
  • Элементы управления проигрывателем : Встроенная поддержка элементов управления проигрывателем: воспроизведение, пауза, отключение/включение звука, регулировка громкости, цикл, прыжок, максимизация/выход из максимизации, с возможностью полной настройки.
  • Преобразования видео: Применить облачные преобразования видео на уровне проигрывателя, которые будут применяться ко всем видео, воспроизводимым в этом проигрывателе. Применяйте дополнительные или переопределяйте преобразования видео на уровне каждого видео.
  • Несколько проигрывателей : Включить несколько проигрывателей на одну и ту же страницу, каждый с разными настройками конфигурации или с разными источниками и одинаковой конфигурацией.
  • Форматы : поддерживает популярные видеоформаты, такие как .mp4 , .ogv , .webm , .mov . Вы можете указать несколько форматов, и проигрыватель автоматически выберет лучший формат для браузера, в котором он воспроизводится.
  • Потоковая передача с адаптивным битрейтом : Полная поддержка HLS и MPEG-DASH, включая автоматическое создание всех необходимых потоковых представлений и вспомогательных файлов.
  • Настройка :
    • Простые параметры для настройки тем кожи , цветовых схем , шрифтов , отображения заголовков и субтитров и других основных настроек плеера.
    • Простое добавление текстовых дорожек для отображения подписей и субтитров для ваших видео.
    • Меньший плавающий проигрыватель , который появляется, когда пользователь прокручивает дальше воспроизводимого видео.
    • Миниатюры поиска , которые отображаются при использовании панели поиска для предварительного просмотра предстоящего контента.
    • События , позволяющие инициировать операции на основе как пассивных, так и интерактивных действий, происходящих в проигрывателе.
    • Доступ к базовому VideoJS API для низкоуровневого управления или настройки любого элемента проигрывателя.
  • Плейлисты : передать список видео или автоматически включить все видео с указанным тегом. Отображение прокручиваемого виджета плейлиста справа или под проигрывателем и/или всплывающее окно с миниатюрой Next up за несколько секунд до конца каждого видео.
  • Рекомендации : Показывать рекомендуемые видео, когда видео заканчивается.
  • Монетизация : Проигрыватель готов к монетизации, с поддержкой ведущих рекламных стандартов, таких как VAST , VPAID и VMAP . Вы также можете включить рекламу через Google DoubleClick или AdSense. Варианты рекламы включают баннеры и предварительные ролики, средние ролики и конечные ролики (с опцией пропуска или без нее).
  • Видео с возможностью покупки : Сделайте ваши видео привлекательными для покупок, показывая изображения продуктов рядом с вашими видео. Это позволяет вашим пользователям посещать страницы сведений о вашем продукте и совершать покупки.
  • Аналитика : отслеживайте, сколько пользователей просматривают ваше видео и когда, вплоть до уровня любых выбранных вами событий (начало, пауза, процент продолжительности просмотра и т. д.), а затем передайте собранные данные в свою учетную запись Google Analytics или другую аналитику. трекеры.

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

  • Стандартный пакет : Включает в себя все функции, описанные в документации к этому видеоплееру. Потоковая передача с адаптивным битрейтом с использованием DASH загружается лениво, если DASH указан в качестве типа источника.
  • Легкий пакет : Исключает следующие дополнительные функции: потоковая передача с адаптивным битрейтом (HLS и DASH), видеореклама, видео с возможностью покупки (альфа-версия).
Стандартный Легкий
Неминифицированный cld-video-player.js
cld-video-player.css		 cld-video-player.light.js
cld-video-player.light.css
Уменьшенный cld-video-player.min.js
cld-video-player.min.css		 cld-video-player.light.min.js
cld-video-player.light.min.css

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

Вариант 1: Ссылка на соответствующую версию видеоплеера непосредственно из Unpkg CDN

Вариант 2: Установить видеоплеер и импортировать как модуль

  1. Установить облачный видеоплеер :

  2. Импортируйте видеоплеер как модуль и импортируйте файл CSS:

Вы можете просмотреть образцы кода HTML и JavaScript для функций, описанных в этом руководстве, в демоверсии Cloudinary Video Player.

Обозреватель кода: примеры работы с видеоплеером

Вы можете поэкспериментировать с различными методами и свойствами видеоплеера в Образцах видеоплеера Cloudinary CodePen.

Что дальше?

  • Узнайте, как встроить видеоплеер на свой веб-сайт
  • Настройте свой видеоплеер
  • Определение списков воспроизведения и настройка видеорекомендаций
  • Доставка видео с использованием форматов потоковой передачи с адаптивным битрейтом HLS или DASH
  • Ознакомьтесь со всеми параметрами видеопроигрывателя в справочнике API видеопроигрывателя
    • .

✔️ Отзыв отправлен!

✖️

Насколько полезной была эта страница документа?

Рейтинг страницы:

Спасибо за отправку вашей оценки. Мы поняли!
Мы хотели бы услышать больше. Расскажите нам, что вам понравилось и как мы можем сделать эту страницу еще лучше:

Что вы искали?

Что было хорошо?

Что следует улучшить?

Хотите, чтобы мы вам ответили?

* Электронная почта:

Имя:

Имя облака:

Cloudinary стремится защищать вашу информационную безопасность.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *