A5.ru: конструктор сайтовA5.ru: создать собственный сайт без лишних затрат и усилий! |
Плеер для сайта – в этой статье мы рассмотрим пример добавления на страницы сайта плеера с плейлистом, в котором есть возможность использовать текст, написанный кириллицей. В предыдущей статье, мы с вами рассмотрели пример использования mp3 плеера на странице сайта с плейлистом, причём в качестве примера, мы взяли плеер с простым html кодом. Так как я поставил перед собой задачу показать как можно более простой код для плеера, то содержимое плейлиста у нас бралось прямо из html кода, а это означает, что в названиях треков нельзя было использовать кириллический текст. В этой статье давайте рассмотрим - плеер для сайта, плейлист которого написан кириллическим текстом. Итак, давайте начнём. Создадим на диске папку, например, с именем playlist. Добавим в эту папку следующие файлы: index.html, playlist.mpl, mju.swf, index.js это рабочие файлы плеера, и сюда же, давайте добавим папку с mp3 файлами, которые мы планируем воспроизводить на сайте: mp3\Elton_John_believe.mp3 \Mylene_Farmer_my_control.mp3 \Leps_not_love.mp3 Все файлы, вы можете скачать себе по ссылке: Скачать плеер с плейлистом на кирилице В результате, мы с Вами получим вот такую конфигурацию файлов и папок: Назначение папок и файлов здесь следующие: Как я уже указывал выше, в папке mp3 находятся аудио файлы для воспроизведения их на сайте, а вот назначение других файлов: index.html - файл с html кодом плеера с плейлистом playlist.mpl - плейлист редактируется блокнотом mju.swf - Flash плеер index.js - файл javascript
Ну а теперь я приведу 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"> <meta name="title" content="плейлист кириллицей"> <script language="javascript" type="text/javascript" src="index.js"> </script> </head> <body> .mju{width:150px;text-align:center;color:#444;font:bold 10px Arial;} .mju a{color:#444;font:bold 10px Arial;text-decoration:underline;} .mju a:hover{text-decoration:none;} a{color:#444;font: 11px Arial; line-height: 170%; text-decoration:none;} p.centr {text-align: center;} </style> <div class="mju"> <object width="150" height="100" id="mju"> <param name="allowScriptAccess" value="sameDomain" /> <param name="swLiveConnect" value="true" /> <param name="movie" value="mju.swf" /> <param name="flashvars" value="playlist=playlist.mpl&auto_run=false&repeat=false&shuffle=false" /> <param name="loop" value="false" /> <param name="menu" value="false" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <embed src="mju.swf" flashvars="playlist=playlist.mpl&auto_run=false&repeat=false&shuffle=false" loop="false" menu="false" quality="high" wmode="transparent" bgcolor="#ffffff" width="150" height="100" name="mju" allowScriptAccess="sameDomain" swLiveConnect="true" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer" /> </object> </div> <table cellspacing="0" cellpadding="4" border="0" style="border:1px solid #CCC"> <tr valign="top" align="left"> <td> <p class="centr"> <b><u><i>Плейлист</i></u></b></p> <a href="/" onclick="mju_play_track(1);return false;">1. "Элтон Джон - Beleve</a><br> <a href="/" onclick="mju_play_track(2);return false;">2. Милен Фармен Control</a><br> <a href="/" onclick="mju_play_track(3);return false;">3. Г. Лепс - Не люблю </a><br> </td> <td> </td></tr><tr valign="top" align="center"> <td colspan="2"> </td> </tr> </table> </body> </html> Результатом работы кода, будет появление на странице вот такого плеера с плейлистом: Если Вы разместите данный код на своей сайте, то получите плеер с плейлистом, в котором описание треков можно делать на русском языке. Для добавления новых аудио треков, Вам достаточно будет закачать на сайт аудио файлы формата mp3 и отредактировать html файл, в нашем случае - index.html. Автр: Виктор Милованов |
CSS для начинающих![]() Скачать без регистрации![]() Как создать сайт в блокноте![]() Скачать без регистрации![]() Как создать простой сайт без знания HTML-2![]() Скачать без регистрации![]() |