|Web Учебник | Самоучитель по CSS | Самоучитель по PHP + MySql |Основы PhotoShop |Контакты. |

Аудио, видео плеер для сайта.

До появления Windows-XP и WindowsServer2004, можно было воспроизвести на сайтах только музыку, это происходило примерно так, браузер подавал команду при помощи ActiveX в "командную строку", которая передавала в WindowsMediaPleyr ссылку на муз.файл и после чего данный плеер воспроизводил эту музыку, и то только в тех случаях если поддерживал этот формат. Так-же оказалось что ActiveX это просто дыра для хакера, ведь можно в место музыки командной строкой как минимум отформатировать диск(уничтожить все данные на компьютере пользователя). На такой технологии до сих пор работает InternetExplorer-6.

Альтернативой ActiveX для мультимедийных приложений на данный момент выступил флеш-плеер. Для простых флеш-объектов(баннеров, браузерных игр) этого плеера вполне достаточно, но для аудио и видео файлов нужно само приложение, которое будет управлять управлять флеш-плеером, потому что последний не имеет интерфейса и соответственно кнопок для управления. Так-же компьютер может не поддерживать некоторые форматы аудио/видео файлов, в этом случае это приложение будет подгружать кодеки(пакеты расширения).

Создавать такие приложения проблема не специалиста по HTML, а программиста на флеш, потому мы воспользуемся готовыми приложениями(аудио/видео плеерами).

Плееров для сайта существуют сотни, а то тысячи видов, есть плееры только под музыку или только под видео, но есть и универсальные. Хотя последние имеют большой объем, и думаю будет большой глупостью их использовать, например у вас сайт рингтонов для мобильных телефонов, представте что сам рингтон имеет вес 0.5мБ а плеер для его воспроизведения 2.5мБ... Так-же почти все плееры имеют лицензию, некоторые лицензии платные. Но я подобрал для вас два плеера с бесплатной лицензией.

Аудио плеер для сайта "webminster-2.0.1".

Данный плеер имеет компактный вид, и не смотря на это в нем есть все необходимые функции для воспроизведения адудио файлов, такие как: регулятор громкости, шкала прогресса, воспроизведение/пауза.
Для того чтобы данный плеер функционировал у вас на сайте достаточно разместить этот код:
<object data="webplayer.swf"
type="application/x-shockwave-flash" width="240" height="64">
<param name="movie" value="webplayer.swf">
<param name="menu" value="false">
<param name="scale" value="noscale">
<param name="flashvars" value="src=files.mp3&amp;autostart=no">
</object>

1)В теге object атрибутом data мы задаем путь к плееру, указываем атрибутом type что это приложение для флеш-плеера, а так-же задаем высоту и ширину.
2)Первым параметром(тегом param), мы указываем чтобы браузер вывел на монитор наш плеер.
3)Параметр-2 menu служит для подключения плей-листов, в моем примере имеет значение false, что говорит об отсутствии плей листа.
4)Третий параметр, scale/noscale разрешает или запрещает растягивать плеер посетителю.
5)Четвертым параметром мы указываем путь к аудиофайлу и устанавливаем автовоспроизведение, yes(да) или no(нет).
Места в коде которые вы должны отредактировать я пометил черным, пути могут быть как абсолютными так и относительными.

Видео плеер для сайта "flowplayer-3.2.7".

Этот видео плеер имеет так -же компактный вид и множество настроек. Работает с FLV(флеш видео файл), MP4 и многими другими типами видео файлов.

<html>
<head>
<script type="text/javascript" src="program/flowplayer-3.2.6.min.js">
</script>
</head>
<body>
<a href="../files/kredit.mp4"
style="display:block;width:520px;height:330px" id="player"></a>
<script type="text/javascript">
flowplayer("player", "program/video/flowplayer-3.2.7.swf",
 { clip: { autoPlay: false, autoBuffering: true } });
</script>
</body></html>

Мы не рассматривали варианты вставки JavaScript и CSS, но тот вариант который предоставлен разработчиком использует эти языки программирования.
1)В тег head нужно указать путь к файлу flowplayer-3.2.6.min.js
2)Атрибутом href тега a мы указываем путь к нашему видео файлу, потом атрибутом style(встроенные стили(css)) мы указываем высоту и ширину нашего плеера и ставим идентификатор id.
3) Далее при помощи функции flowplayer мы обрабатываем данные из ссылки с идентификатором(id)player, перехватываем параметры(адрес видео файла, ширину и высоту плеера), а так-же передаем параметры {clip:{autoPlay:false,autoBuffering:true}}, autoPlay -это автовосприизведение, true это да, а false без автовосприизведения. Это далеко не все параметры которые можно передать плееру, но о них можно узнать на сайте разработчика, ссылка на сайт есть в архиве.

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

скачать аудио(видео) плеер для сайта. В этом архиве 2 папки, первая audio, в которой расположен аудиоплеер, код для него вы можете скопировать выше. В второй папке flowplayer лежит видеоплеер для сайта(flowplayer-3.2.7.swf), а так-же папка example в которой лежит скрипт flowplayer-3.2.6.min.js написанный на javascript. Так-же есть файл index.html, в котором есть код как вставить плеер, а также ссылки на документацию.

Хотите скачать песню Ёлки - Прованс? Тогда заходите сюда
 

                   Перейти к выбору следующей страницы
 

Добавить в закладки
Добиться абсолютной межбраузерности для механизма добавления в закладки не существует ни на каких языках!!! А для браузера "Chrome" не работают вообще ни какие механизмы!!!
Потому это лучше всего делать в ручную при помощи одновременого нажатия клавиш Ctrl и D , после чего нужно нажать готово(добавить). Такой "механизм работает всегда и везде!!!