Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Разговор подруг:
- Мой муж программист - дебил. Сделали сыну прививки и он написал на ребенке маркером: «Вирусная база обновлена 01.10.12 г.»

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Разговор подруг:
- Мой муж программист - дебил. Сделали сыну прививки и он написал на ребенке маркером: «Вирусная база обновлена 01.10.12 г.»

  Моя группа в контакте:



Как поставить аудиоплеер на свой сайт

Механизм добавления на html страницу внешних объектов, таких как звук и видео, завязан на использовании установкой плагинов для Вашего браузера. Причем, при использовании тега EMBED, браузер открывает внешний объект с помощью того плагина, который у него установлен в данный момент.

Как поставить аудиоплеер на свой сайт

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

Давайте посмотрим, ка всё это работает. Как только, Ваш браузер встречает в html коде тег EMBED, то он, подгружает подходящий установленный плагин. Если подходящего плагина не окажется, тогда браузер выдаст сообщение о том, что плагин необходимо установить и предлагает перейти на страницу установки.

Информация о параметрах открываемого объекта и необходимых плагинах, для его открытия, передаётся браузеру через следующие параметры тега EMBED:

  • align — выравнивание объекта по отношению к окружающему контенту
  • border — устанавливает размер рамки вокруг объекта
  • classid — указывает на класс объекта, используя адрес его нахождения
  • codebase — базовый адрес, по которому будут определяться относительные адреса, указанные в classid, data, archive.
  • codetype — тип данных, которые использует объект, согласно параметруclassid
  • data — путь к данными, которые объект будет обрабатывать
  • declare — объявление объекта
  • height — высота объекта
  • hspace — боковые отступы объекта от окружающего контента
  • pluginpage - адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру
  • standby — выводит сообщение, пока объект не загрузится
  • type — тип данных, которые хранятся по адресу, указанному в data
  • vspace — отступы сверху и снизу от окружающего контента
  • width — ширина объекта
  • class — класс тегов, используемых в CSS
  • dir — направление текста внутри элемента
  • id — имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей
  • lang — язык, на котором написан текст внутри htmlэлемента
  • style — используется для применения встроенных стилей CSS
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
  • title — выводит всплывающую подсказку при наведении курсора мыши на html-элемент.

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

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

<embed src="music.mp3" width="350" height="50" autostart="0" 
  type="application/x-mplayer2" 
  pluginspage="http://www.macromedia.com/go/getflashplayer"
  hspace="10" vspace="10">
</embed>

Давайте подробно разберём, за что отвечает в данном коде каждый параметр.

Итак, тег EMBED, указывает, на то, что на страницу будет добавлен внешний объект. Путь к файлу объекта, указан в параметре: src="music.mp3"

Сразу отмечу, что когда воспроизводимый файл будет размещён на сервере, то лучше будет, если Вы укажите к нему полный, абсолютный путь, например, http://www.site.ru/music.mp3

Далее, идет размер объекта, в данном случае, плеера. Параметрами width="350" height="50" указаны ширина и высота плеера.

Параметр autostart="0" указывает на то, что по загрузке страницы, плеер будет остановлен.

Тип объекта указан в параметре – type.

В случае, если у браузера не будет установлен плагин для отображения этого объекта, то параметром (pluginspage) браузеру указано, где этот плагин можно взять: pluginspage="http://www.macromedia.com/go/getflashplayer.

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

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

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

Как видите, при использовании тега EMBED звук на страницу сайта добавляется довольно просто. Плеер для страниц сайта, добавляется несколькими всего строчками html кода.

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

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

Не забудьте правильно указать полный путь к звуковому файлу.

Вот что у нас получилось:



Комментарии


Рустем
Плеера то нету вообще!!!
2014-01-05 23:16
Серж
ок, норм.
2016-01-06 22:34

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь