Как создать плеер для сайта на HTML5 и JavaScript
Контент на сайте можно разнообразить с помощью видео или аудио. Учим использовать HTML5 video- и audio-плееры и работать с ними на JS.
Уже прошли те времена, когда для воспроизведения аудио или видео на сайте нужно было подключать сторонний плеер на Flash — в Adobe решили больше не поддерживать эту технологию, а значит, мы можем вздохнуть с облегчением, потому что HTML5 позволяет создавать плееры с помощью тегов и .
Как использовать audio и video в HTML5
Чтобы создать плеер, достаточно такого кода для аудио:
Атрибут controls используется для того, чтобы отобразить элементы управления. Если его не указать, никакого интерфейса не будет: аудиоплеер не будет отображаться, а в видеоплеере просто будет показан кадр из видео или постер.
Обратите внимание, как указан источник. Для видео достаточно прописать атрибут src, а для аудио нужно прописывать дополнительные элементы source, чтобы указать пути и формат файлов. В коде выше добавлено два одинаковых файла, но в разных расширениях — это нужно для того, чтобы прослушать запись можно было на всех устройствах и во всех браузерах, потому что не все из них поддерживают mp3 или какой-то другой формат.
Также внутри плеера можно прописать какой-нибудь текст — его увидят те, у кого не поддерживается HTML5. Правилом хорошего тона считается указание ссылки на скачивание современного браузера.
Вот список атрибутов, которые можно указать для плеера:
- controls — панель управления;
- autoplay — автовоспроизведение;
- loop — цикличность;
- muted — выключение звука;
- poster — обложка видео. Если не указать, будет выбран случайный кадр;
- preload — предварительная загрузка. Существует 3 значения: auto (полностью), metadata (небольшую часть, чтобы определить основные метаданные) и none (без загрузки);
- src — ссылка на файл.
Также можно указать высоту и ширину.
Существует элемент , который размещается внутри плеера, — в нем указывается путь к текстовым файлам: субтитрам или метаданным. Для них прописываются следующие атрибуты:
- default — указывает на дорожку, которая используется по умолчанию;
- kind — тип файла, можно указать следующие значения:
- subtitles — субтитры (стоит по умолчанию),
- captions — субтитры для глухонемых,
- chapters — название глав и их временные рамки,
- descriptions — звуковое описание происходящего для слепых,
- metadata — метаданные;
- label — название дорожки;
- src — путь к файлу;
- srclang — язык дорожки.
Всего этого достаточно, чтобы вставить простой плеер на сайт, но некоторых функций у него все-таки нет:
- можно убрать звук, но нельзя регулировать громкость;
- нельзя менять скорость воспроизведения;
- нельзя поставить на повтор и так далее.
Поэтому мы подключаем JS и пишем свой интерфейс.
Как написать плеер на JS
Плеер на JS работает, как и любой другой интерфейс: пользователь нажимает на кнопки, скрипт отлавливает эти события и вызывает необходимые функции. Прежде всего нужно создать сам интерфейс:
Источник статьи: http://skillbox.ru/media/code/kak_sozdat_pleer_dlya_sayta/
Пишем проигрыватель lossless аудио на JavaScript
Добрый день, %username%. Сегодня я хотел бы поделится своим опытом разработки прототипа онлайн lossless аудио плеера.
На сегодняшний день, вряд ли можно кого-то удивить аудио или видео плеером, встроенного непосредственно в веб-страницу. Существующие технологии, библиотеки и API позволяют легко наполнить сайт любым медиа-контентом. Но есть такие люди, которым этого недостаточно (в том числе я). Именно поэтому, как истинному любителю музыки в lossless, мне потребовалось сделать браузерный плеер поддерживающий такой формат аудио, как flac.
К этой идее меня подтолкнула одна статья: Web плеер FLAC.JS (HTML5). Узнав, что есть такой замечательный фреймворк как Aurora.js и декодер формата flac для него, я не смог просто пройти мимо всего этого. Все — подумал я — теперь, когда мой уровень энтузиазма зашкалил, я должен сделать этот плеер. Итак, начнем…
Бекенд
В качестве бекенда у нас будет выступать небезызвестные Nginx и Apache c PHP (куда же без него). Первый будет отвечать за отдачу аудио данных, второй будет выдавать страницу с плеером и обрабатывать запросы Ajax.
Фронтенд
Первым делом нужно продумать весь функционал, который будет поддерживать наш плеер. Самое очевидное это Play/Pause, Next, Prev, полоса буферизации и поиска, громкость, строка названия трека и время. Также хотелось бы реализовать отображение обложки альбомов, плейлисты, поиск по базе аудиотеки и так далее, но я решил пока остановиться на самом основном. Так как с веб-разработкой я сталкивался не часто, то с версткой и дизайном у меня, мягко говоря, не очень.
Вот что у меня получилось в итоге:
Отлично. Необходимый минимум у нас есть. Теперь нужно все это оживить. Поэтому переходим к JavaScript.
Создадим класс Playlist который, как вы уже поняли, будет отвечать за список воспроизведения:
Где list — сам список, current — номер текущего трека, repeatmode — режим повтора (0 — без повтора, 1 — повтор всего списка, 2 — повтор одного трека).
Далее реализовываем все необходимые методы.
И напоследок метод перемешивания списка:
Плейлист у нас есть, переходим к самому плееру. Создадим класс Musica:
В params мы разместим все элементы интерфейса с помощью селекторов JQuery, по переменной pstate мы будем определять состояние плеера (воспроизводит/не воспроизводит), seekstate нам пригодится, когда мы будем реализовывать полосу поиска, а timetype определяет тип таймера (сколько прошло или сколько осталось). Также в этом конструкторе мы сразу повесили обработчики событий на все имеющиеся кнопки.
Фреймворк Aurora.js содержит класс Player, который реализует весь необходимый нам минимум. В нем есть такие методы как play(), pause(), stop(), seek(), а также реализован обработчик событий. Это сильно упрощает нам задачу.
Попробуем реализовать метод инициализации плеера:
Здесь мы загружаем в фреймворк текущий трек из списка воспроизведения, сбрасываем графический интерфейс на значения по умолчанию и подключаем обработчики событий. Этот метод мы будем вызывать каждый раз, когда нам нужно воспроизвести новый трек.
Теперь нам нужно сделать, на мой взгляд, самое сложное: полосу поиска и регулятор громкости. Эти два элемента интерфейса очень похожи между собой (по крайней мере в нашем случае).
Сначала мы подключаем обработчик события mousedown. После этого мы меняем значение progressbar и подключаем еще два обработчика. В первом (mousemove) мы также меняем значение progressbar. Во втором (mouseup) мы отключаем эти два обработчика и вызываем метод фреймворка seek(). Для того, чтобы во время поиска мышкой, progressbar не дергался от события progress, которое мы обрабатываем выше, нам нужен seekstate.
Почти таким же способом делаем регулятор громкости:
Плеер почти готов. Нам только осталось добавить методы play(), netxt(), prev(). В их реализации нет ничего сложного:
Источник статьи: http://habr.com/ru/post/235741/
Аудиоплеер на HTML и JavaScript
В это статье вы прочитает о том, как сделать аудиоплеер на JavaScript и HTML, если вы задаётесь вопросом как это сделать, то вам сюда.
Также посмотрите наш учебник по HTML, если вы его плохо знаете.
Создание аудиоплеера:
Для начала разберём логику плеера и что мы тут реализуем, а реализуем переключение треков, и сам плейлист, что касается паузы, то в HTML уже по стандарту это есть.
Начнём с HTML, тут вообще не чего сложного нет, надо просто написать тег внутри документа и добавить атрибут controls .
Как видите стандартный HTML плеер выглядит красиво, но есть одна проблема, его возможности ограниченны, вы можете только останавливать трек и менять громкость и всё, что на мой взгляд не достаточно, поэтому мы уберём атрибут controls , после чего у нас будет пустой экран.
Так как теперь у нас пустой экран, мы добавим кнопки для управления, также тег для аудио дорожек.
Также дальше идут четыре тега , это кнопки, первая для проигрывания музыки, вторая для паузы, третья переключает на предыдущий трек, четвёртая кнопка на следующий.
Теперь перейдём к CSS, с помощью его мы изменим только дорожку, кнопки оставим по умолчанию, как они сделаны в браузере.
У нас появилась не большая дорожка, серого цвета, также при проигрывание она будет закрашиваться в почти чёрный цвет, за счёт увеличения
JavaScript:
Пришло время самому главному, к созданию основной логике на чистом JavaScript, для начала мы возьмём все элементы из HTML.
Мы тут просто взяли элементы с которыми будим работать, элемент берём через id, а остальные через селектор.
Дальше сделаем массив с названиями треков и переменную в которой будет хранится индекс трека в массиве.
Самое интересное в этом коде, это window.onload , оно нужно что бы выполнять какие то действия, во время загрузки страницы, в нашем случае, присваивает переменной treck значение ноль.
Тут у многих возник вопрос, почему надо присваивать значение переменной именно во время загрузки страница, а не во время объявления переменной, так сделано потому что иначе, её значение всегда было бы ноль, нам же надо использовать для переключения песен.
Теперь перейдём к функции для переключения песен.
В начале мы в функции передаём индекс песни, которая нам нужна, следующие меняем путь до трека, с помощью audio.src назначаем путь до песни которая нам нужна, взяв название песни из playlist .
Потом назначаем audio.currentTime значение ноль, оно отвечает на какой минуте проигрывается песня, то есть мы песню ставим на нулевую секунду.
Последнее это запуск песни через audio.play() .
Теперь перейдём к обработку событий этих кнопок, для работы с плеером и музыкой.
Это пожалуй самая сложная часть программы, когда мы нажимаем кнопку «Play».
Первым делом начинаем проигрывать песню, потом запускаем интервал, он нам нужен, что бы отследить, когда переключать трек на следующий.
Внутри интервала присваиваем переменной audioTime на какой секунде сейчас трек, и переменной audioLength , присваиваем сколько всего секунд длится песня, потом вычисляем по формуле сколько процентов песни уже проигралась и назначаем это значение ширине элемента time , тем самым мы создали линию прогресса.
Идёт условие, где проверяем что переменная audioTime и audioLength , это нужно что бы убедиться в том что песня закончилась, также проверяем переменную treck , что бы она была меньше трёх, это нужно что бы её значение не стало больше индекса массива и песни не остановились.
Если условие верно, то увеличиваем переменную treck и меняем песню используя функцию switchTreck .
Иначе опять идёт проверка на то, что песня закончилась, но уже смотрим что бы переменная treck , была больше или равна трём, если верна присваиваем ей ноль и также меняем трек.
Источник статьи: http://prognote.ru/web-dev/front-end/html-and-javascript-audio-player/
Как написать плеер на javascript
Данная рубрика заменит Вам полноценный «HTML5 учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML5.
Расширяем возможности HTML за счёт создания собственных тегов
В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.
Определение доступности атрибута HTML5 с помощью JavaScript
Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.
HTML5: API работы с вибрацией
HTML5 — глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.
Создание форм с помощью Webix Framework — 4 практических примера
Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.
Знакомство с фрэймворком Webix
В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.
Отключение HTML5 валидации
Бесит валидация, которая добавляется к полям формы, если вы пользуетесь HTML5? Её можно без проблем отключить.
5 устаревших фишек в HTML5
В этой статье мы рассмотрим пятёрку элементов HTML5, которые устарели и были удалены из спецификации.
Источник статьи: http://ruseller.com/lessons.php?rub=43&id=2276
Видеоплеер на JavaScript и HTML
В этой статье вы прочитаете как сделать на чистом javascript видеоплеер, или на HTML.
Также у нас на сайте есть статья о том, как сделать аудиоплеер на JavaScript и HTML, если вам это интересно, то посмотрите.
Делаем видеоплеер на JavaScript:
Для начала разберём как будем делать видеоплеер на JS и что мы реализуем, с начала мы возьмём элемент и будем брать данные о видео, менять их и выводить при необходимости.
А реализуем мы кнопки перемотки и пауза/плай, также видео дорожку и перемотку на нужную часть видео под средством нажатия на неё.
Для начала конечно нужно в HTML объявить элемент , с атрибутом controls , он нужен что бы уже какие то кнопки были для управления видео.
Как видите в браузере уже, какой то плеер, но опять же это только базовый, поэтому мы уберём атрибут controls , и у нас будет просто видео.
Дальше уже буду показывать как сделать плеер с нуля, что бы вы поняли как можно работать с видео в JavaScript, поэтому сейчас изменю HTML.
Тут в целом всё понятно, единственное скажу, что элемент с классом video-track , это видео дорожка.
Если вам тут что то не понятно или плохо знаете HTML, то посмотрите наш учебник по HTML.
Теперь перейдём к CSS, не много изменим вид, вот вёрстка.
В целом тут всё просто, но если не понятно, то посмотрите наш учебник по CSS.
JavaScript:
Теперь перейдём к самому главному, это к созданию кода на JavaScript, и логики, сначала посмотрим какие элементы нужно подключить.
Тут мы берём элемент по id остальное берём по селектору.
Дальше будем делать событие кнопок, сначала посмотрим работу с запуском видео.
Давайте разберём этот код, в начале через video.play() запускаем проигрывание видео, а потом запускаем интервал, он нам нужен для отображение сколько прошло времени от начала видео, на видео дорожке.
Внутри него создаём две переменных, videoTime отвечает за то, сколько уже секунд проигрывается видео, videoLength содержит сколько всего секунд длится видео, потом по формуле определяем сколько процентов видео прошло, и отображаем это на видео дорожке с помощью элемента с классом timeline , назначив ему этот процент в качестве ширины.
Теперь посмотрите на код нажатия на кнопку паузы.
Как видите с помощью video.pause() , останавливаем воспроизведение и потом удаляем работу интервала.
Дальше идёт код для перемотки видио, но он очень простой.
Тут всё так просто, что даже не буду говорить что тут написано, так как всё из комментариев должно быть понятно.
Последнее что осталось сделать, так это что бы при нажатие на видео дорожку автоматически переключалось время.
На мой взгляд эта самая интересная часть программы, сначала мы присваиваем переменной posX , позицию клика по «X», и вычитаем из него восемь, это нужно, так как левый отступ у нас равен восьми, а вычисляет e.clientX от размеров всего экрана.
Дальше определяем по формуле, на какой процент записи мы хотим переключится, и присваиваем это значение ширине линии таймлайна, потом точно также вычисляем сколько на какую секунду видео надо переключится, вот результат.
Также ниже можете скачать файлы этого плеера, что бы проверить как он работает.
Вывод:
В этой статье вы прочитали как сделать на javascript видеоплеер, и на HTML тоже, думаю вам понравилось.
Но если вы заметили, там есть много не доработок, например, видео не делается на полный экран или не показывается сколько времени осталось до окончания.
Если вы хотите это исправить, то скачайте файлы и используя сайты по этим ссылкам (сайт 1, сайт 2), они вам помогут.
Источник статьи: http://prognote.ru/web-dev/front-end/javascript-and-html-video-player/