Создать свой html плеер

PlayerJS

Вы можете легко собрать свой HTML5 плеер в конструкторе PlayerJS, скачать .js файл и установить одной строкой JavaScript, кодом iframe или плагином WordPress или DLE. У нас также есть облачный хостинг плееров в версии PRO.

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

Вы можете воспроизводить все, что поддерживают браузеры и онлайн индустрия в данный момент. Как правило, это файлы MP4, MP3, а также стримы HLS и DASH. Также есть интеграция API видеосервисов YouTube, Vimeo и Dailymotion. Мы также поддерживаем DVR, Airplay, Chromecast и режим Picture in Picture для браузеров Webkit.

Используйте официальный плагин для WordPress. Он позволяет публиковать видео или аудио простым шорткодом.

Мы не показываем свою рекламу, логотипы и вотермарки в бесплатной версии (и не планируем). Мы не контролируем плееры — они работают полностью автономно и не содержат код, который может быть использован нежелательным образом в будущем.

Да, вы можете показывать рекламу в формате VAST или VPAID. PlayerJS используют крупные рекламных сети, поэтому мы в курсе всех рекламных стандартов.

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

Есть открытый JS API на все случаи жизни. Можно получать все события плеера и отправлять команды через JavaScript.

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

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

Эти шаблоны созданы в конструкторе PlayerJS (можно использовать и редактировать совершенно бесплатно)

Источник

Аудиоплеер на HTML и JavaScript

В это статье вы прочитает о том, как сделать аудиоплеер на JavaScript и HTML, если вы задаётесь вопросом как это сделать, то вам сюда.

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

Создание аудиоплеера:

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

HTML:

Начнём с HTML, тут вообще не чего сложного нет, надо просто написать тег внутри документа и добавить атрибут controls .

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

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

Давайте разберём, с классом audio-track , это аудио дорожка, внутри него имеется с классом time , это остаток сколько осталось до окончания.

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

CSS:

Теперь перейдём к CSS, с помощью его мы изменим только дорожку, кнопки оставим по умолчанию, как они сделаны в браузере.

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

JavaScript:

Пришло время самому главному, к созданию основной логике на чистом JavaScript, для начала мы возьмём все элементы из HTML.

Мы тут просто взяли элементы с которыми будим работать, элемент берём через id, а остальные через селектор.

Дальше сделаем массив с названиями треков и переменную в которой будет хранится индекс трека в массиве.

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

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

Теперь перейдём к функции для переключения песен.

В начале мы в функции передаём индекс песни, которая нам нужна, следующие меняем путь до трека, с помощью audio.src назначаем путь до песни которая нам нужна, взяв название песни из playlist .

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

Последнее это запуск песни через audio.play() .

Теперь перейдём к обработку событий этих кнопок, для работы с плеером и музыкой.

Это пожалуй самая сложная часть программы, когда мы нажимаем кнопку «Play».

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

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

Идёт условие, где проверяем что переменная audioTime и audioLength , это нужно что бы убедиться в том что песня закончилась, также проверяем переменную treck , что бы она была меньше трёх, это нужно что бы её значение не стало больше индекса массива и песни не остановились.

Если условие верно, то увеличиваем переменную treck и меняем песню используя функцию switchTreck .

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

Дальше идёт обработки кнопки пауза.

Источник

Создаём видеоплеер для нашего сайта

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

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

Подготовка

Для начала, нам нужно подготовить исходные материалы: видео возьмём с Youtube. Для обеспечения большей совместимости, загрузим видео в двух форматах: MP4 и OGV. Для преобразования видео из одного формата в другой, можем воспользоваться каким-то конвертером.

Также нам понадобится изображение, которое будет отображаться в качестве обложки. Иконки возьмём с Font Awesome. Ну и конечно, нам понадобятся библиотеки jPlayer, jQuery. Поместите все эти файлы в папки:

HTML

Для начала, подключим файлы библиотек и таблицы стилей в разделе :

HTML структура будет очень похожа на ту, что мы писали при создании аудио плеера:

Активируем видео

Тут всё будет так же, как и в предыдущем примере. Только тут, помимо перечисления ссылок на видео, нам нужно указать адрес изображения-постера.

На данный момент результат должен выглядеть примерно так:

Добавляем стили

Теперь, давайте добавим css правил, чтобы исправить отображение.

Открываем/создаём файл style.css.

Во-первых, убираем нижнее подчёркивание у всех ссылок:

Ширина видео

Задаём определённые размеры контейнеру:

Заголовок

Заголовок окрасим в тёмно-серый цвет, позиционируя его по центру.

Кнопка проигрывания

Для кнопки проигрывания воспользуемся иконкой из FontAwesome:

.jp-video-play < font-family: "FontAwesome"; position: absolute; top: 45%; left: 46%; >.jp-video-play a

Интерфейс плеера

Интерфейс видео плеера будет очень похож на интерфейс аудио плеера. Цветовая схема будет та же — оранжевая. Кнопки воспроизведения, паузы и громкости сделаем белыми:

.jp-interface < width:100%; bottom: 0; position: relative; background: #f34927; background: -moz-linear-gradient(top, #f34927 0%, #dd3311 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f34927), color-stop(100%,#dd3311)); background: -webkit-linear-gradient(top, #f34927 0%,#dd3311 100%); background: -o-linear-gradient(top, #f34927 0%,#dd3311 100%); background: -ms-linear-gradient(top, #f34927 0%,#dd3311 100%); background: linear-gradient(to bottom, #f34927 0%,#dd3311 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f34927', endColorstr='#dd3311',GradientType=0 ); overflow: hidden; -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1); >.jp-interface a < color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); >.jp-controls, .jp-toggles < padding: 0; margin: 0; font-family: "FontAwesome" >.jp-toggles < position: absolute; top: 14px; right: 14px; >.jp-controls li, .jp-toggles li < display: inline; >.jp-play,.jp-pause < width: 55px; height: 40px; display: inline-block; text-align: center; line-height: 43px; >.jp-mute,.jp-unmute < position: absolute; right: 85px; top: 0; width: 20px; height: 40px; display: inline-block; line-height: 43px; >.jp-progress < background-color: #992E18; border-radius: 20px 20px 20px 20px; overflow: hidden; position: absolute; left: 55px; top: 14px; width: 55%; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset; >.jp-play-bar < height: 12px; background-color: #fff; border-radius: 20px 20px 20px 20px; >.jp-volume-bar < position: absolute; right: 40px; top: 16px; width: 45px; height: 8px; border-radius: 20px 20px 20px 20px; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset; box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset; background-color: #992E18; overflow: hidden; >.jp-volume-bar-value < background-color: #fff; height: 8px; border-radius: 20px 20px 20px 20px; >.jp-current-time

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

Полноэкранный режим

Также у нас есть возможность полно-экранного просмотра. Именно поэтому нам нужно создать стили для кнопок, которые будут применяться в расширенном режиме отображения. С помощью z-index, мы сможем правильно спозиционировать все нужные нам элементы:

.jp-video-full < /* правило для IE6 (full-screen) */ width:480px; height:270px; /* правило для IE7 (full-screen) */ position:static !important; position:relative; >.jp-video-full div div < z-index:1000; >.jp-video-full .jp-jplayer < top: 0; left: 0; position: fixed !important; position: relative; /* правило для IE6 (full-screen) */ overflow: hidden; >.jp-video-full .jp-interface < position: absolute !important; position: relative; /* правило для IE6 (full-screen) */ bottom: 0; left: 0; >.jp-video-full .jp-gui < position: fixed !important; position: static; /* правило для IE6 (full-screen) */ top: 0; left: 0; width:100%; height:100%; z-index:1001; /* на 1 уровень выше, чем остальные */ >.jp-video-full .jp-video-play a < font-size: 3em; height: 80px; width: 80px; line-height: 95px; >.jp-video-full .jp-progress

Добавляем тени

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/web-video-player/
Перевел: Станислав Протасевич
Урок создан: 1 Мая 2013
Просмотров: 53502
Правила перепечатки

5 последних уроков рубрики «jQuery»

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

Заметка: Перезагрузка и редирект на JavaScript

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

Источник