Как создать видеоплеер на HTML5 с нуля
Сегодня мы заглянем за кулисы HTML5, и вы узнаете, как разработать плеер для сайта с нуля. Цель этого урока заключается в том, чтобы объяснить код таким образом, чтобы любой мог создать свой собственный видеоплеер:
Перед началом проекта нужно подготовить исходные материалы. Вам понадобятся:
- Пустой html документ;
- Два видеоролика (вы можете загрузить примеры видеороликов с бесплатных онлайн-источников, таких как PixaBay.com или Videezy.com). Убедитесь, что они оба формата .mp4;
- Обложка (изображение для презентации видео). Для этого можно скачать соответствующее изображение с Pexels.com или FreeImages.com;
- Иконки для управления плеером (можно воспользоваться такими сайтами, как FlatIcon.com или IconArchive.com).
Результат должен выглядеть примерно так:
В своем уроке я буду использовать:
- Изображение Белка;
- Архив контурных медиа кнопок;
- Шрифт Awesome стилизованный под видеоплеер;
- Бесплатный редактор кода Brackets, меня привлекла в нем удобная кнопка «Live Preview» (Предварительный просмотр), расположенная в правом верхнем углу, которая показывает результат работы на веб-странице после того, как вы сохранили отредактированный html-файл.
Теперь, когда мы выбрали и собрали все необходимые материалы, можно приступить к работе над кодом плеера для сайта HTML5.
Это базовый скелет HTML5 будущего видеоплеера. Он использует 10 основных строк кода, которые позволят видео отображаться на любой веб-странице с основными кнопками управления.
Начнем с разметки HTML, в ней используется универсальное объявление doctype <! DOCTYPE html>. Это первое, с чего начинается любой HTML-документ. Оно нужно для того, чтобы браузер был в курсе, какой документ вы используете.
Теперь перейдем к элементам, которые нужно включить в HTML: <head> и <body>. Сейчас мы должны сосредоточиться на том, что происходит в body. Вы не сможете создать видео без тега <video>. Внутри <head> вставляем <video>.
Теперь в теге <video> нужно указать, какие размеры должен иметь плеер (рекомендуется установить размеры плеера, чтобы избежать мерцания). Источник видео, которое вы хотите воспроизвести в плеере, и изображение обложки. Это будет презентацией видео, которое зрители увидят, прежде чем нажмут кнопку «Play».
Теперь рассмотрим доступные атрибуты и посмотрим, как они работают.
Атрибут poster — он нужен для создания изображения-презентации вашего видео. В нем необходимо указать папку с изображением (в данном случае «Images») и название файла. Затем нужно выбрать ширину и высоту плеера. Я решил выбрать симметричную форму.
Чтобы собрать плеер для сайта, важно вставить атрибут «controls». Без него вы можете управлять своим видео только правой кнопкой мыши, а затем выбрать «Воспроизвести» или другие основные функции. Тег <controls> отображает основной массив элементов управления: кнопки «Воспроизвести», «Пауза», «Громкость» и кнопку полноэкранного режима для более удобного использования функций.
Далее идет тег <source>, в котором необходимо указать атрибут src с источником видео. Поскольку вы уже создали папку для видеоплеера, источник видео будет легко распознаваться кодом, достаточно просто указать имя конкретного видеофайла.
Поскольку тег <video> поддерживает три формата видео (MP4, WebM и Ogg) необходимо указать в атрибуте type, какой из них используется. Для удобства пользователей рекомендуется использовать как можно больше версий видео. Поэтому, если у вас есть .ogg-версия видео, нужно открыть еще один тег <source>. Например: <source src = «videoexample.ogg» type = video / ogg>.
Теперь, если вы нажмете кнопку «Video Preview» (Предварительный просмотр видео), то увидите базовый видеоплеер с обложкой, кнопками управления и видео, которое корректно воспроизводится в пределах выбранного размера.
Создаваемый плеер для сайта будет находиться в <div>, который в свою очередь будет содержать два других <div>:
Затем мы собираемся построить площадку для CSS-кода. Для этого я создал три идентификатора внутри большого тега div с именем video-player, поскольку — это цель нашего проекта.
Первый div-контейнер отвечает за скелет видео. Сюда нужно перенести первоначальные строки тега <video>, который мы создали на втором этапе данного руководства. Второй div-контейнер содержит индикатор просмотра, а третий — кнопки видеоплеера. Помните, что каждый тег <div> должен иметь уникальный идентификатор:
Далее я задаю каждому <div> необходимые атрибуты. Таким образом, у div video-tree есть video теги.
<Div> progress-tree отвечает за индикатор выполнения, поэтому имеет идентификатор «progress».
<Div> button-tree требует больше вашего внимания. Я вставил три кнопки: play (воспроизвести), back (назад) и next (вперед). Таким образом, каждая кнопка заключена в свой собственный тег <div>, имеет собственный идентификатор («play-button», «backward-button» и «forward-button») и размеры (100 на 100 пикселей для каждой кнопки).
У кнопки воспроизведения есть своя временная шкала, которую я вставил в <div> с идентификатором «time-factor». Не забудьте также использовать ограничения времени «0: 00/0: 00», которые представляют собой время начала и момент времени, которого достигло видео.
После всего этого ваш «Live Preview» (Предварительный просмотр) должен выглядеть так:
Как видите, кнопки плеера с плейлистом для сайта находятся в неправильном порядке, но мы исправим это с помощью CSS.
Сохраните файл html и откройте новый файл с именем «video-player.css». Не забудьте сохранить файл css в той же папке, где html.
Теперь вернитесь в файл html и добавьте в тег <head> атрибуты, которые свяжут файл html с css-файлом: <link rel = «stylesheet» type = «text / CSS» href = «video -player.css»>.
Независимо от структуры, которую вы хотите использовать в файле css, просто указываете элемент с id, который отметили в html-файле, указав в начале #. Так вы сообщите редактору кода, какую часть необходимо стилизовать первой:
Выше показан скриншот файла css. Я показал основной CSS, но с помощью этого языка можно сконструировать видеоплеер более сложными способами. Когда понятны основы, можно исследовать более сложные стили самостоятельно.
Я последовательно настроил все элементы создаваемого плеера в файле css.
Для цветовой палитры видеоплеера я выбрал различные оттенки синего, чтобы различать его основные элементы.
У видеоплеера синий фон, он ограничен размерами дисплея плеера, так как функция display имеет значение inline-block. Поэтому веб-страница не станет полностью синей, так как синий фон будет ограничен размерами видеоплеера.
Следующий элемент проектирования — это video-tree, для которого я выбрал нужные размеры, и указал, чтобы видео выводилось на весь экран.
Для progress-tree я выбрал только цвет, и больше сосредоточился на ветке «progress», определяющей индикатор просмотра. Вам нужно выбрать для прогресс-бара цвет отличный от progress-tree, чтобы пользователи могли видеть, сколько осталось видео.
Для button-tree я создал две разные записи. Первая запись фокусируется только на ширине кнопок. Вторая запись управляет кнопками при горизонтальной перестройке с помощью команды «display: inline-block» и центрируется атрибутом «vertical-align: middle».
Этот CSS позволяет настроить плеер для сайта на ваше усмотрение.
На этом этапе вы должны снова сохранить проект, создать новый файл и назвать его «video-player.js». Сохраните файл в той папке, которую используете для этого проекта.
Затем нужно связать файл JavaScript с исходным файлом HTML5 строкой между тегом <link> и закрывающим тегом <head>. Например: <script type = «text / javascript» src = «video-player.js»> </ script>:
В приведенных выше строках JavaScript-кода я сосредоточился только на кнопке воспроизведения.
Сначала мы вводим идентификатор элемента, с которым хотим работать в первую очередь. В нашем случае это идентификатор «play-button». Затем необходимо прописать форму кнопке через GetElementbyID.
Далее, когда зритель нажимает на кнопку воспроизведения, мы обрабатываем «Click» с помощью метода addEventListener. Функция «playOrPause» заставляет кнопку «Воспроизвести» работать, как обычную кнопку воспроизведения, а также как кнопку «Пауза».
Затем в коде создания плеера для сайта вы описываете функцию playOrPause. Если видео приостановлено, нажатие кнопки активирует воспроизведение. Если не приостановлено (блок «else»), нажатие кнопки «Воспроизвести» остановит воспроизведение.
Вы можете поделиться своим опытом и мыслями относительно создания видеопроигрывателя в комментариях!
Данная публикация представляет собой перевод статьи «How to Build an HTML5 Video Player from Scratch» , подготовленной дружной командой проекта Интернет-технологии.ру
HTML5-видеоплееры, о которых вы должны знать
1. Plyr.io
Простой и гибкий плеер для сайта, который поддерживает YouTube-видео. Он популярен среди профессионалов и новичков благодаря своему простому дизайну, и позволяет плавно обрабатывать даже большие видеофайлы.
Ключевые особенности:
- Полная поддержка экранных дикторов и VTT;
- Гибко настраиваемая платформа, которая позволяет пользователям изменять внешний вид по своему выбору;
- Широкий спектр инструментов для обработки и редактирования;
- Адаптивный дизайн с функцией полноэкранного режима.
2. Videojs
Еще один плеер, который разработан с использованием HTML5. Video.js поддерживает Flash-видео, HTML5, Vimeo и YouTube. Можно наслаждаться воспроизведением видео с помощью Videojs на мобильных устройствах и настольных компьютерах. Этот видеоплеер был запущен в 2010 году и в настоящее время используется более чем на 200 000 сайтов.
Ключевые особенности этого плеера для сайта HTML5:
- Широкий охват форматов;
- Простота настройки;
- Возможность подключения дополнительных плагинов, которые обеспечивают поддержку многих социальных сетей.
3. YouTube
Недавно YouTube перешел на использование нового видеоплеера, созданного на базе HTML5. Теперь не нужно беспокоиться о кодировании видео. YouTube позволяет воспроизводить видео в любом браузере. Но для доступа к этому инструменту нужно создать учетную запись YouTube. Также необходимо учитывать, что видео автоматически удаляются, если они нарушают любое из положений политики YouTube.
Ключевые особенности:
- YouTube прост в использовании;
- Доступен бесплатно;
- Поддерживаются все форматы и браузеры.
4. Projekktor
Видеоплеер с открытым исходным кодом. Projekktor был выпущен под лицензией GPLv3, он написан с использованием JavaScript. Данная платформа обладает возможностями, достаточными для решения всех проблем, связанных с кроссбраузерной совместимостью.
Ключевые особенности этого плеера с плейлистом для сайта:
- Автоматическое определение лучших способов воспроизведения видео;
- Projekktor известен благодаря впечатляющему дизайну и удобству;
- Профессионалы считают Projekktor одним из самых надежных решений для воспроизведения видео.
5. JPlayer
Еще один бесплатный видеоплеер с открытым исходным кодом, для которого доступна впечатляющая медиа-библиотека, написанная на JavaScript. JPlayer известен как комплексный инструмент для разработки инновационных медиа-решений.
Основные функции:
- Может быть развернут в течение нескольких минут и прост в использовании;
- Полностью настраиваемая платформа с поддержкой CSS и HTML;
- Не нагружает процессор.
6. Mediaelement.js
Это продвинутый видео и аудио-плеер на HTML5, который поддерживает Silverlight с Flash. А также предоставляет интерфейс, который корректно отображается во всех браузерах. Плеер использует обновленные и настраиваемые инструменты Flash вместе с плагинами Silverlight, чтобы все старые и новые браузеры могли использовать один интерфейс. Не нужно создавать плеер для сайта, потому что есть Mediaelement.js.
Основные функции:
- Видео и аудио-плеер разработан с поддержкой CSS и HTML;
- Mediaelement.js соответствует различным стандартам доступности, включая WebTT.
7. Afterglowplayer
Плеер поддерживает управление всеми элементами видео.
Ключевые особенности:
- Прост в настройке и использовании;
- Поддерживает множество форматов видеофайлов;
- Быстрое время отклика.
Лучшие плагины HTML5-видеоплееров для WordPress
1. Responsive Video Embeds
Responsive video embeds содержит много интересных функций. Позволяет вставлять несколько видеороликов в одну запись и изменять размер встроенных видео в виде iFrames. Таким образом, они смогут вписываться в окна разных размеров.
Этот продвинутый плеер для мобильного сайта в настоящее время поддерживает почти все популярные видео, размещаемые на WordPress.TV, Revision 3, hulu.com, Scribd, Daily motion, Vimeo и YouTube и т. д. Он доступен на бесплатной основе:
2. Video Gallery WordPress Plugin
Этот WordPress-плагин стоит от $15. Он не только обрабатывает галереи видео, но и может работать как галерея, в которую можно добавлять аудио, изображения и видео. Он также позволяет размещать рекламу на YouTube. Чтобы помочь профессионалам в реализации маркетинговых кампаний, этот инструмент дает возможность удалять водяные знаки и заменять их новыми логотипами. А также помогает делиться контентом в социальных сетях одним кликом мыши:
3. Youtube Channel Gallery
Простой в использовании бесплатный плагин со всеми основными функциями, который позволяет встраивать плейлисты YouTube на WordPress -сайты. А также создавать список миниатюр с пользовательскими настройками канала. С помощью простых элементов управления можно персонализировать через галерею каналов YouTube все, начиная от соотношения сторон окна плеера для сайта, качества видео и продолжая типом видеопотока, темы и ссылки. Поддерживаются различные настраиваемые виджеты:
4. MediaElement.js
Продвинутый аудио-видео HTML5-плеер, который работает с Flash Fallback. С его помощью можно получить доступ к широкому спектру ярлыков для аудио и видео. Можно использовать полноэкранный режим, так как он отлично работает в Internet Explorer и Chrome.
Наиболее полезные опции данного плагина: цикличные видео, управление размерами, настройки автоматического воспроизведения, индикатор выполнения, настройки громкости и продолжительности, предварительный просмотр видео и управление аудио функциями.
MediaElements.js позволяет управлять множеством интерактивных функций одним кликом мыши. Он отлично подойдет для начинающих благодаря своему простому и удобному интерфейсу:
Данная публикация представляет собой перевод статьи «12 best html5 video players you should know» , подготовленной дружной командой проекта Интернет-технологии.ру
Видеоплеер для сайта на HTML5: создаем по подробной инструкции
Здравствуйте, уважаемые читатели. Учиться по статьям из интернета довольно сложно. Сейчас я испытал все великолепие этого метода на себе. Сто раз я задавал себе вопрос: «Неужели так сложно объяснить зачем я делаю те или иные действия? Ведь так значительно проще понять почему у меня не получается добиться должного эффекта!».
Я вам немного завидую. Сейчас я собираюсь написать исчерпывающую статью с детальным разъяснением. Если бы такая попалась мне 4 часа назад, я бы не потерял столько времени и уже давно бы пил чай с ватрушками.
В этой статье я собираюсь рассказать как создать видеоплеер для сайта, установить его и пользоваться в свое удовольствие. Это особенная задача и не менее занимательная статья у меня получится. Вы увидите не просто пошаговое руководство, а поймете что мы делаем, зачем и почему.
Если вы обладаете исчерпывающими знаниями, то абсолютно все равно какой у вас движок, пользуетесь ли вы им вообще, что вы делаете. Вы знаете алгоритм, подстроить его под свои реалии не такая уж серьезная проблема.
Преимущества метода
Я уже рассказывал как добавлять на свой сайт видео с YouTube. В этом нет ничего сложного и, откровенно говоря, мне кажется этот метод более оптимальным, нежели загрузка на хостинг. Дополнительный канал привлечения денег как никак.
Хотя конструктор Юпод, о котором сегодня пойдет речь также предполагает подключение дополнительных рекламных модулей. Кстати, юпод также позволяет загрузить любой ролик с того же ютуба и Вконтакте. Так что подумайте лишний раз о том, куда именно загружать файл.
Юпод позволит поменять внешний вид стандартного плеера. Он прекрасно впишется в ваш личный блог. То есть вы сможете залить ролик на YouTube или личную страницу Вконтакте, произвести несколько дополнительных манипуляций и получить нечто свое. При желании доступ к файлу на самом ютубе можно закрыть.
Экономия места на хостинге – дело нешуточное.
И это не все преимущества. Помимо места, есть еще такой важный момент как скорость отдачи. На вашем хостинге он может быть небольшим, а у YouTube показатели впечатляют. Ролик точно не будет долго грузиться.
Свой дизайн
Итак, первым делом вам нужно зайти на официальный сайт https://uppod.ru и пройти несложную регистрацию. Не буду уделять этому вопросу много времени, сложности еще встретятся на нашем пути и таятся они не здесь.
После того как вы зарегистрировались нужно «Собрать плеер». Здесь вы можете создать свою аудио, видео или фото галерею. Щелкните по иконке с изображением того, что хотите добавить.
Переходим в меню «Стили». Если вы хоть как-то разбираетесь в терминологии кода, то понимаете, что стиль – это внешний вид чего бы то ни было. Стиль может быть сайта в целом или как в нашем случае – плеера. Нажимаете на плюс.
Тут очень простой визуальный конструктор.
Тыкая по разным значениям и меняя настройки не сложно догадаться что к чему и создать вполне привлекательный дизайн. Первая вкладка отвечает за внешний вид.
Вторая вкладочка поможет изменить нижнюю панель с таймингом, скоростью, громкостью и прочими элементами.
Третья категория – «Кнопки», добавит элементы или удалит ненужные.
Если вы хотите иметь возможность создавать подборки с плейлистом, то это также можно сделать бесплатно. Четвертый пункт меню в помощь.
А вот за подключение логотипа и некоторых модулей (таких как субтитры) придется заплатить деньги. 7 долларов в месяц. Я полагаю, что это не обязательно, в бесплатном режиме все тоже очень хорошо работает, так что решать вам.
После того как вы закончите, нажмите «Сохранить», кнопка располагается над плеером. После того как вы это сделаете, кнопка изменит свое значение, на ней появится фраза «Загрузить стиль». Скачайте его к себе на компьютер.
На сервисе Uppod вы также можете скачать кучу готовых шаблонов стилей для видеоплеера, аудио или фото в разделе «Скины».
Я рекомендую создать папку плеер, в которую вы сохраните свой шаблон для видео или загруженный скин.
Также вы можете создать свое аудио и точно также загрузить в конце в эту же папку «Player».
Подключение к сайту
Только что на HTML 5 вы создали внешний вид своего плеера. Однако, не все так просто. Вам нужно загрузить сам плеер Юпод себе на сайт, чтобы соединить скрипт программы с его внешним видом.
Чтобы было понятнее представьте, что у вас дома есть пластинка. Она черная, круглая, на ней есть наклейка зеленого или красного цвета. Ее внешний вид и есть стиль, который вы сейчас создали через сайт Юпод.
Но пластинку нельзя послушать без грамофона. Точно также, как ваш стиль нельзя использовать без плеера. Перейдите в меню «Собрать плеер» — «Скачать», как показано на рисунке.
Загрузите универсальную версию в свою заветную папочку «Player». Пока все это находится на вашем компьютере, а не на сайте. Продолжая простую аналогию объясню что требуется делать дальше, а именно принести граммофон туда, где вы собираетесь слушать музыку с пластинок. В одну и ту же комнату. В нашем случае – в одну и ту же папку сайта.
Все имеющиеся на данный момент файлы нужно поместить на хостинг. Я пользуюсь TimeWeb и настоятельно рекомендую, если эта статья вам поможет – переходите на него.
Так будет проще разбираться с задачами, о которых я рассказываю в своем блоге. Иногда мне оставляют комментарии с просьбами помочь и если у нас с вами один и тот же хостинг, я могу быстрее отвечать.
Ну а вообще, залить файлы на сервер можно через программу FileZilla или личный кабинет.
Я использую CMS WordPress – еще одно простое решение для новичков, но зная алгоритм не составит труда добавить плеер на любой другой движок. Открываете основную папку с сайтом, public_html и прямо здесь создаете еще одну папку player. Именно в ней и будет храниться все, что нужно для плеера.
Внутрь заливаем скачанный плеер и стили. В моем случае и видео, и аудио.
Представьте себе малыша, который оказался в одной комнате с граммофоном и пластинкой. Он элементарно не представляет что с этим делать – как одно относится к другому. Здесь все точно также.
Вам нужно объединить информацию о стиле, с информацией о плеере. На официальном сайте Uppod переходим в раздел «Документация» — «Интеграция». Здесь есть плагин, который подскажет как добавить соединение для WordPress, Joomla, Битрикс и даже Ucoz.
Скачиваю плагин.
Перехожу в панель администратора WordPress, открываю «Плагины», «Добавить новый» и загружаю только что скачанный архив.
Не забудьте активировать. Теперь его нужно изменить, чтобы код соответствовал нашим реалиям.
Смотрите, каждый файл на хостинге можно отыскать по определенной ссылке. Все, что находится у вас в папке public_html можно отыскать по ссылке: адрес-вашего-сайта/название файла. Если файл располагается в папке, то URL будет адрес-вашего-сайта/название-папки/название-документа.
В раздел «Settings» вам нужно вписать путь до плеера, который мы скачали с официального сайта Юпод. Мы с вами разместили его в папку player, а значит ссылка будет выглядеть так: https://адрес-вашего-сайта/player/uppod.swf, где uppod.swf – название и расширение файла.
Если вы собираетесь использовать только один стиль для видео, аудио и так далее, тот, который уже создали, то путь к файлу можно прописать здесь же, используя URL https://cx69575.tmweb.ru/player/video.txt при условии, что именно так называется файл со стилем, который вы создали через конструктор.
Если стили будут разными, то я покажу вам как действовать чуть позже.
То же самое мы проделываем для аудио.
Как добавить видео
Если вы используете описанный выше способ и только один шаблон с дизайном, то добавить ролик в запись можно следующим образом. Выбираете «Добавить новую запись», переходите в режим текстового редактора, и вводите следующий код [uppod video=ссылка на ролик].
Обратите внимание, что если размер видео будет меньше или больше выбранного вами при создании шаблона, то в автоматическом режиме эти параметры не подгонятся. Часть изображения будет обрезана.
Чтобы все было грамотно можно обрезать видео по размеру в Camtasia. Эти и другие способы обработки роликов, а также массу информации о создании видео, вы можете узнать в курсе «Качественное видео в блог за час».
Важная информация
Если вы собираетесь использовать более одного шаблона и сделать все более грамотно, а не просто, то в папке player, вам нужно создать еще две папки. Одна будет с плэйлистами (playlist), а вторая со стилями (style).
Создаете ли вы свой стиль или используете скины, вам нужно будет скачать новый шаблон. Сделать это можно следуя по пути «Собрать плеер» — «Видео» — «Стили» — «Скачать».
Далее загружаете стиль в папку «Style».
Добавлять свои ролики в созданный вами плеер можно и через официальный сайт Uppod. Так они будут автоматически менять размеры по ширине. Но предварительно конструктор нужно настроить.
Переходим в настройки и прописываем путь до папки со стилем, плейлистами и самим плеером. Это нужно, чтобы программа писала правильный код и его можно было использовать на сайте.
В случае, если вы создали две эти новые папки, нужно кое-что поменять в коде плагина, загруженного на вордпресс. Снова возвращаемся в установленные плагины и жмем «Изменить юпод».
Нужно поменять путь до папки со стилями. Теперь он будет выглядеть так: https://cx69575.tmweb.ru/player/style.
Войдя на Юпод и перейдя во вкладку «Видео» — «Файл» вы можете добавить ролик. Щелкаете на плюс, вводите название ролика, вставляете ссылку на него, выбираете стиль и щелкаете «Ок». Будьте внимательны, выбранный стиль надо загрузить в папку стилей на хостинг, чтобы все отразилось.
Если вы хотите вставить ролик, загруженный на ваш сайт, но не можете отыскать ссылку, нужно зайти в раздел «Медиабиблиотека» и щелкнуть по эскизу с вашим роликом.
В правой части будет отображаться нужный URL.
Теперь щелкаем на код, рядом с клипом, который только что оформили и сохранили.
Копируем HTML — код. Обратите внимание, здесь есть также JavaScript, но это совсем другая история, о которой я расскажу в будущих статьях. Копируем html 5.
И все также создаем новую запись, переходим в текстовый редактор и вставляем только что скопированный текст.
Готово. Ролик на сайте.
Подписывайтесь на рассылку, если вам была полезна эта статья и узнавайте не только как действовать, чтобы добиться того или иного эффекта, но и почему вы это использовали. Это значительно полезнее.
До новых встреч и удачи.
Бесплатные видео-плееры для Вашего сайта
Страница 1 из 2
По той или иной причине, многие вебмастера используют видеоплееры на своих сайтах. Онлайн видео-плеер предоставляет вам возможность создания собственного телевидения в веб-пространстве. Вы можете добавлять неограниченное количество видео и располагать их как вы хотите, по названиям альбома, имени исполнителя или году, все в ваших руках! Все, начиная от простой системы видео до HDTV может быть размещено на вашем сайте или блоге.
Ниже вы найдете коллекцию бесплатных видеоплееров для вашего сайта.
01. Flowplayer
Flowplayer — это видеоплеер с открытым исходным кодом (GPL 3) для веб-сайтов. С его помощью можно вставлять видео на ваши веб-страницы. Создан для владельцев сайтов, разработчиков, любителей, бизнеса и серьезных программистов. Используя Flowplayer Вы можете создать свой собственный плеер и разместить его на Вашем сайте.
Особенности:
- Он совершенно бесплатен, с открытым исходным кодом
- Вы можете создать свой плеер в считанные минуты
- Видео из любой точки мира — использование стандартных протоколов потокового видео RTMP или HTTP с наиболее распространенными веб-серверами Lighttpd, Apache, Nginx или IIS или поток видео из известных сетей Akamai, Amazon Cloudfront, Highwinds, HDDN, SimpleCDN и многое другое.
- Flowplayer создан при помощи технологии Flash, которая гарантирует, что 98% всех интернет-пользователей смогут просматривать видео. Также имеется уникальная JavaScript API.
Как установить:
Подробное руководство по установке.
02. Video LightBox
Video JS LightBox — бесплатная программа, которая поможет Вам легко подключить видео к веб-сайту, веб-странице или блогу, несколькими кликами мышки, без написания кода.
Video JS LightBox бесплатен для некоммерческого использования. Лицензионный сбор требуется только для использования на коммерческом веб-сайте.
Особенности:
- Вставляет flv, mp4, 3gp видео файлы
- Добавляет Youtube, Facebook, Google Video, Metacafe, Vimeo, MySpace видео
- Mac & Windows версии
- Автоматически создает уменьшенное изображение превью
- Добавляет заголовки
- Много великолепных тем галерей
- Встроенный FTP
Как установить:
Есть подробная инструкция по установке, созданная командой Video JS LightBox на их веб-сайте.
03. JW Player
JW Player — удобный и гибкий flash-видеоплеер. Он поддерживает воспроизведение любого формата, который Adobe Flash Player сможет обработать (FLV, H.264, MP4, MP3, AAC, JPG, PNG и GIF). Он также поддерживает различную потоковую передачу и плэйлисты (включая RMTP, HTTP, живую потоковую передачу и т.д.), широкий диапазон flashvar настроек и расширенный API JavaScript.
Особенности:
- Возможность изменения внешнего вида JW Player в соответствии с дизайном Вашего сайта.
- Хорошая система плагинов — с плагинами Ваш проигрыватель дополнительные возможности.
- Легкое управление видео
Как установить:
Это руководство поможет Вам установить JW Player. Во-первых, загрузите ZIP-архив с сайта разработчика, который содержит все, что Вам необходимо.
Шаг 1: Загрузите файлы проигрывателя на Веб-сайт — player.swf, yt.swf и swfobject.js. Удостоверьтесь, что Вы также загрузили все необходимые видео, аудио и/или изображения на Ваш сайт.
Шаг 2: Вставьте код проигрывателя на Вашу страницу . Замечание: если Вы помещаете файлы в различные каталоги, удостоверьтесь, что установили ссылки в этом коде соответственно.
<p>The player will show in this paragraph</p>
<script type=’text/javascript’ src=’swfobject.js’></script>
<script type=’text/javascript’>
var s1 = new SWFObject(‘player.swf’,’player’,’400′,’300′,’9′);
s1.addParam(‘allowfullscreen’,’true’);
s1.addParam(‘allowscriptaccess’,’always’);
s1.addParam(‘flashvars’,’file=video.flv’);
s1.write(‘preview’);
</script>
Здесь подробная инструкция по установке видеоплеера на Вашем сайте.
04. GDD FLVPlayer
GDD FLVPlayer является бесплатным программным обеспечением, чтобы воспроизведения FLV/mp4 файлов. С GDD FLVPlayer, Вы сможете легко воспроизводить свои видео FLV/mp4, поскольку он не требует сложных инструментов разработки Flash.
Возможности:
- Полностью настраеваемая панель управления
- Публикация Ваших FLV или mp4 видео на веб-сайте несколькими кликами мыши
- Добавляет видео к любому из Ваших Flash-проектов за секунды.
- Можно использовать свой собственный логотип в проигрывателе.
- Можно использовать любой размер видео.
- Плеер абсолютно бесплатен.
- Никаких специальных навыков программирования не требуется.
Как установить:
Простое руководство с практическими рекомендациями находится в ZIP-архиве с проигрывателем.
05. MC Media Player
MC Media Player — это Flash-проигрыватель предназначен для добавления видео, аудио и изображений на веб-страницы. Он может свободно использоваться как на некоммерческих, так и на коммерческих веб-сайтах.
В настоящий момент есть две версии проигрывателя: MC Classic (ранее известный как 20×360 Edition) и MC Altair (beta).
- MC Altair — однофайловый видеоплеер, легко установливается и хорошо настраивается. Поддерживает FLV и H.264.
- MC Classic — это было исходная версия проигрывателя, но он больше не разрабатывается.
Возможности:
- Настраиваемый интерфейс
- Возможность запуска как с сервера MC Media Player, так и с Вашего собственного сервера
- Изменяемый размер и формат изображения.
Как установить:
Есть Setup tool доступный на сайте MC Media Player, с помощью которого Вы можете создать свой собственный проигрыватель.
06. Video Player Pro
Video Player Pro — еще один удобный бесплатный видеоплеер, который можно легко сконфигурировать и быстро добавить на Ваш веб-сайт. Он бесплатен для персонального использования.
Возможности:
- Комбинируют все Ваши фильмы в один большое профессиональный пакет.
- Video Player Pro доступен в различных версиях, в зависимости от Ваших потребностей.
- Не требует знания программирования для Flash.
Как установить:
Есть очень подробное учебное видео руководство, доступное онлайн.
07. VISCOM Web Player
VISCOM Web Player — бесплатный, кроссплатформенный проигрыватель видео для веб-сайт. Это — легкий и удобный способ добавить одно или множество видео на любой веб-сайт, включая онлайновое обучение или дистанционное обучение, на Ваш блог, Myspace или форум.
Возможности:
- Поддержка потокового flv-видео с Вашего веб-сайта.
- Поддержка xml-плейлиста, Вы можете добавить один фильм или множество в Ваш проигрыватель.
- Включение или Отключение видео-превьюшек.
- Поддержка полноэкранного режима во время воспроизведения.
- Легко настраиваемый веб-проигрыватель, не требующий знаний программирования.
- Имеются высококачественные темы для плеера: Youtube style, Quick time player style, Window media player style, Real player style, Standard player style.
08. SS4UPlayer
SS4UPlayer — гибкий интернет-видеоплеер, который поддерживает потоковую передачу и прогрессивную загрузку. Работет и под Windows и под Linux. Он поддерживает воспроизведение таких форматов как FLV, 264, MP4, MP3. У него есть широкий диапазон flashvar-настроек, которые могут быть установлены через JavaScript. Основанная на XML поддержка тем позволяет Вам полностью настраивать свой цвет, размер, уровень прозрачности, тип шрифта, цвет шрифта и размер шрифта.
Возможности:
- Вы можете загрузить свой персональный логотип.
- Поддержка Flash AS3 с классами и пакетами.
- Возможность загружать Ваше видео через Flash vars в javascript или через XML-файл
- Поддержка плейлистов, используя xml.
- Поддержка потоковой передачи и прогрессивная загрузки.
- Очень устойчивый и настраиваемый на всех уровнях.
Как установить:
Подробная инструкция по установке идет с каждым загружаемым ZIP-файлом проигрывателя. Или Вы можете непосредственно загрузить Руководство по установке в PDF-формате.
09. Anarchy Media Player
Anarchy Media Player — для всех кто хочет простоту использования при публикации аудиовизуального контента к сети, он позволяет вставлять любой mp3, Flash flv или Quicktime mov файл непосредственно на Вашу веб-странице, при этом скрывая ссылку для скачивания. Распространяется под лицензией GNU.
Как установить:
С подробной установкой можно ознакомится по ссылке.
Скачать
10. SublimeVideo
SublimeVideo — видеоплеер на HTML5, который позволит Вам легко встраивать видео на любую страницу, блог или сайт, используя последние современные веб-стандарты.
Производители браузеров все еще продолжают работать над полной поддержкой спецификации HTML5 для видео, поэтому на данный момент SublimeVideo находится все еще в экспериментальном состоянии и работает только в ограниченном количестве браузеров. Но долгосрочная цель состоит в том, чтобы заставить его работать во всех современных браузерах.
SublimeVideo скоро будет доступен абсолютно бесплатно (по крайней мере, для некоммерческого использования).
Возможности:
- Полнооконный режим — видео раскрывается в соответствии с размером окна браузера, может быть удобно, если Вы все еще хотите получить доступ к другим приложениям при просмотре видеофильма в Вашем браузере.
- Полноэкранный режим — в настоящий момент только поддерживается в последней сборке WebKit, Вы можете активировать этот режим щелкнув, при нажатой клавише Alt, по кнопке полного окна.
- Преимущества видео HTML5 — не требуются никакие плагины для браузера, нет зависимости от Flash.
- Своя JavaScript-библиотека.
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом