Html код плеера для сайта

Наш скайп

radio2400

Слушать радио на плеере

Мы используем HTML5 плеер – плеера нового поколения.

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

1) Самый простой и легкий вариант html5 плеера. Плеер адаптируется под любой браузер и не требует никаких ресурсо-затрат. Этот код вставляеться в любое место (тело) вашего сайта.

Внешний вид плеера в разных браузерах (клик на картинку).

2) Плеер со стилями – вставка фреймом (iframe). (клик на картинку образец). Плеер встанет вместе с кнопками заказов.

Вставьте код ниже в любое место странички вашего сайта.

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

Вставьте в тег следующий код (ссылка на скрипт плеера, стилей плеера и css дополнительных кнопок)

В любое место странички сам блок плеера вместе с кнопками автозаказ, и стол заказов

Контент на сайте можно разнообразить с помощью видео или аудио. Учим использовать HTML5 video- и audio-плееры и работать с ними на JS.

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

Как использовать audio и v >Чтобы создать плеер, достаточно такого кода для аудио:

И такого — для видео:

Атрибут 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 работает, как и любой другой интерфейс: пользователь нажимает на кнопки, скрипт отлавливает эти события и вызывает необходимые функции. Прежде всего нужно создать сам интерфейс:

  • Воспроизведение / Пауза
  • Полоса воспроизведения
  • Стоп
  • Предыдущее / Следующее
  • Звук / Громкость
  • Время(всего/просмотрено)
  • Плейлист
  • Автовоспроизведение
  • Видео на весь экран
  • Поделиться видео
  • Перед воспроизведением
  • Во время воспроизведения
  • После воспроизведения

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

  • Загрузка плеера (Impression)
  • Запуск плеера (PlayerStart)
  • Переход к просмотру видео (ViewVideo)
  • Воспроизведена 1/4 записи (PlayerFirstQuartile)
  • Воспроизведена 1/2 записи (PlayerMidPoint)
  • Воспроизведена 3/4 записи (PlayerThirdQuartile)
  • Видео просмотрено до конца (PlayerComplete)

Постоянная обложка плеера:

Перед воспроизведением показать

  • Стартовый экран
  • Плейлист
  • Черный экран
  • Изображение
  • Повтор видео
  • Переход к следующему видео

Зарабатывайте на показах ваших видео!

Подключите ваш видеоплеер ко всемирно-известным сетям видеорекламы через сервис ADVARK

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

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

Adblock detector