Приятно, что на ЛиРу всё больше и больше людей, которые не хотят ждать милостей от природы или других людей, а берут быка за рога сами: лезут в исходный код страницы и т.д. Для остальных, менее любознательных просто опубликую HTML5 "коды" основных плееров. Очень кратко, на вопросы отвечать не буду. Сразу скажу, что коды могут быть не обязательно вот прямо точь в точь такими. Если интересны подробности, почитайте в учебниках или справочниках по HTML5 про "audio" и "video".
Аудиоплеер
<audio controls="controls" src="тут ссылка на файл mp3" type="audio/mpeg"></audio>
Видеооплеер
<video controls="controls" width="тут ширина картинки" height="тут высота картинки" poster="тут ссылка на заставку для видео (картинка)" src="тут ссылка на видеофайл"></video>
Параметр "poster" может отсутствовать. Ширина и высота указывается в пикселях.
Музыкальная открытка
По сути это - видеоплеер, но с аудиофалом:
<video controls="controls" width="тут ширина картинки" height="тут высота картинки" poster="тут ссылка на картинку" src="тут ссылка на файл mp3" type="audio/mpeg"></video>
Совет. Чтобы кнопки управления воспроизведением не закрывали картинку, рекомендую добавить сделать внизу картинку что-то примерно на 30 пикселей.
Источник: www.aliveinternet.ru/post429050850/?upd
Серия сообщений "Шаблоны":
Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - Делаем рамочку с картинками
...
Часть 31 - Бегущий текст в цветной рамоке + flash генератор бегущей строки
Часть 32 - ПОЛЕЗНАЯ ИНФОРМАЦИЯ ПО ЖЖ
Часть 33 - Переход на коды...HTML5 для ЛиРу - коды плееров
Часть 34 - Шаблон рамочки //из инета /
Часть 35 - Закругляем углы изображения с помощью HTMLкода
...
Часть 39 - ПРОСТЫЕ РАМКИ С ЗАГОЛОВКОМ
Часть 40 - Полоски или линии которыми можно украсить свой текст
Часть 41 - КОДЫ ОСНОВНЫХ КНОПОЧЕК