Добрый день! Приятно, что на ЛиРу всё больше и больше людей, которые не хотят ждать милостей от природы или других людей, а берут быка за рога сами: лезут в исходный код страницы и т.д. Для остальных, менее любознательных просто опубликую 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 - Делаем рамочку с картинками
...
Часть 30 - Бегущий текст в цветной рамоке + flash генератор бегущей строки
Часть 31 - ПОЛЕЗНАЯ ИНФОРМАЦИЯ ПО ЖЖ
Часть 32 - Переход на коды...HTML5 для ЛиРу - коды плееров
Часть 33 - Шаблон рамочки //из инета /
Часть 34 - Закругляем углы изображения с помощью HTMLкода
...
Часть 38 - ПРОСТЫЕ РАМКИ С ЗАГОЛОВКОМ
Часть 39 - Полоски или линии которыми можно украсить свой текст
Часть 40 - КОДЫ ОСНОВНЫХ КНОПОЧЕК

Серия сообщений "LiveInternet":
Часть 1 -
Часть 2 - Работа в расширенном текстовом редакторе. Части V и VI.
...
Часть 34 - Как увеличить вероятность попадания вашего сообщения на ЛиРу в «Новостной Листок»? (сообщение дня)
Часть 35 - Как бороться со спамом в комментариях?
Часть 36 - Переход на коды...HTML5 для ЛиРу - коды плееров
Часть 37 - Оформляем Личные Сообщения
Часть 38 - Как поменять цвет фон и подчеркнуть текст в нашем редакторе без применения кодов
...
Часть 42 - Сообщение в техподдержку о непристойных дневниках
Часть 43 - Исправляем глюки...
Часть 44 - Перестали приходить письма с ЛиРу? Совет дня от автора Rost

Серия сообщений "Уроки LiveInternet ":
Часть 1 -
Часть 2 - Работа в расширенном текстовом редакторе. Части V и VI.
...
Часть 30 - Как увеличить вероятность попадания вашего сообщения на ЛиРу в «Новостной Листок»? (сообщение дня)
Часть 31 - Как бороться со спамом в комментариях?
Часть 32 - Переход на коды...HTML5 для ЛиРу - коды плееров
Часть 33 - Оформляем Личные Сообщения
Часть 34 - КАК ВЗЯТЬ ПОНРАВИВШУЮСЯ СХЕМУ ОФОРМЛЕНИЯ ДНЕВНИКА НА ЛИРУ
Часть 35 - Как поменять цвет фон и подчеркнуть текст в нашем редакторе без применения кодов
Часть 36 - Исправляем глюки...
Часть 37 - Перестали приходить письма с ЛиРу? Совет дня от автора Rost

Серия сообщений "Плееры":
Часть 1 - МУЗЫКА + ПЛЕЕРЫ
Часть 2 - Делаем плеер
Часть 3 - КОНВЕРТЕР ОНЛАЙН
Часть 4 - Плеер-картинка и Как вставить музыку во флеш-плеер
Часть 5 - Переход на коды...HTML5 для ЛиРу - коды плееров
Часть 6 - Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером