A5.ru: конструктор сайтов

A5.ru: создать собственный сайт без лишних затрат и усилий!

Плеер для сайта с плейлистом – итак, мы подошли с Вами к следующей ступеньке добавления на страницы Ваших сайтов плеера. В этом уроке, мы рассмотрим, как установить на сайт плеер с плейлистом.

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

Внешне плеер для сайта с плейлистом выглядит как обычный плеер, но рядом с плеером или прямо в самом плеере, добавляется окно, в котором идет перечень доступных для прослушивания mp3 файлов.

Посетитель сайта, кликая курсором мышки в элементы списка, тем самым запускает воспроизведение того или иного аудио mp3 трека.

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

Вот первый, достаточно простой вариант, создан на базе плеера от flash-mp3-player.net.

Итак, давайте сразу начнем с практики.  Сначала создадим на диске рабочую папку, например, вот такую -  C:\playlist.

В эту папку скопируем три mp3 аудио записи и сюда же добавим html файл, например с именем index.html:

Плеер для сайта с плейлистом

Добавим в файл index.html следующий код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

          <title>Плеер для сайта с плейлистом</title>

          <META HTTP-EQUIV="content-type" CONTENT="TEXT/HTML; CHARSET=windows-1251">

</head>

<body>

<object type="application/x-shockwave-flash" data="player_mp3.swf" width="200"height="100">

<param name="movie" value="player_mp3.swf" />

<param name="FlashVars" value="mp3= Elton_John–Believe.mp3 | Mylene_Farmer-Beyond_my_control.mp3 | Grig_Leps-I_No_Love.mp3 &amp;showvolume=1" />

</object>

</body>

</html>

Сразу обращаю Ваше внимание на то, что все используемые в данном примере файлы вы можете скачать одним архивом вот по этой ссылке: Скачать файлы плеера с плейлистом.

Теперь, откроем браузером файл index.html. Как видите, перед нами открылся плеер с плейлистом:

Плейлист для проигрывателя

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

Давайте последовательно посмотрим, как это работает данный html код.

Итак, строкой:

<object type="application/x-shockwave-flash" data="player_mp3.swf" width="200"height="100">

Браузеру объявляется, что необходимо отобразить внешний flash объект,  тип объекта указан параметром type.

Сам объект расположен по адресу data="player_mp3.swf", размеры объекта – ширина 200 пикселей, высота 100 пикселей.

Вот с такими основными параметрами открывается тег object.

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

Если мы откроем html справочник, то прочитаем, что тег<PARAM> используется для передачи параметров Java-апплетам или объектам веб-страницы, созданным с помощью тегов <APPLET> или <OBJECT>.

Синтаксис использования тега <PARAM>:

    Name - имя параметра

    Value - значение параметра

Итак, следующая строка:<param name="movie" value="player_mp3.swf" /> говорит браузеру проигрывать плеером player_mp3.swf

 

И далее, через вертикальную линию, идет перечень mp3 аудио файлов, которые и составляют плейлист.

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

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

Неоспоримым преимуществом данного проигрывателя является его простота.

Автор: Виктор Милованов

 

Как создать сайт без знания HTML

Как создать сайт без знания HTML

Как создать сайт на WordPress

Как создать сайт на WordPress

CSS для начинающих

CSS для начинающих

Скачать без регистрации

 
x