Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
22-03-2021 19:08
Это цитата сообщения Marina-Rozina Оригинальное сообщение
Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
Пишу урок, как я делаю плеер, который включается с помощью кнопочки, как во флеш. Важные атрибуты буду выделять красным цветом и объяснять, что они означают.
Обычный HTML5 аудиоплеер выглядит так
Его код:
<center>
<audio controls="controls" src="https://static.tunnel.ru/media/audio/2021-03/post/149729//andre-rieu---serenade-du-rossignol.mp3"></audio>
</center>
Так как мы будем добавлять аудиоплеер сверху на изображение кнопки, уменьшим его ширину до 90 пикселей.
Код:
<center>
<audio controls="controls" src="https://static.tunnel.ru/media/audio/2021-03/post/149729//andre-rieu---serenade-du-rossignol.mp3" style="width: 90px;"></audio>
</center>
Внимание!
Не задавайте значение ширины менее 90 пикселей, иначе пропадёт кнопка воспроизведения, и вы не сможете включать и выключать аудио в прозрачном плеере!
комментарии: 0
понравилось!
вверх^
к полной версии
Это цитата сообщения Marina-Rozina Оригинальное сообщение
Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером
Пишу урок, как я делаю плеер, который включается с помощью кнопочки, как во флеш. Важные атрибуты буду выделять красным цветом и объяснять, что они означают.
Обычный HTML5 аудиоплеер выглядит так
Его код:
<center>
<audio controls="controls" src="https://static.tunnel.ru/media/audio/2021-03/post/149729//andre-rieu---serenade-du-rossignol.mp3"></audio>
</center>
Так как мы будем добавлять аудиоплеер сверху на изображение кнопки, уменьшим его ширину до 90 пикселей.
Код:
<center>
<audio controls="controls" src="https://static.tunnel.ru/media/audio/2021-03/post/149729//andre-rieu---serenade-du-rossignol.mp3" style="width: 90px;"></audio>
</center>
Внимание!
Не задавайте значение ширины менее 90 пикселей, иначе пропадёт кнопка воспроизведения, и вы не сможете включать и выключать аудио в прозрачном плеере!
Поздравляю с 8 Марта! – с HTML плеером
22-03-2021 18:59
Это цитата сообщения Marina-Rozina Оригинальное сообщение
Поздравляю с 8 Марта! – с HTML плеером
Код плеера:
комментарии: 2
понравилось!
вверх^
к полной версии
Это цитата сообщения Marina-Rozina Оригинальное сообщение
Поздравляю с 8 Марта! – с HTML плеером
Дорогие подруги!
Сердечно поздравляю вас с нашим женским праздником! Здоровья вам, вечной молодости и красоты, удачи и благополучия! Пусть мужчины дарят вам подарки и цветы, обожают, балуют, носят на руках. И не только в женский день. Будьте счастливы и любимы!
Мой букет и эта песня для вас. Здесь HTML плеер полностью прозрачен и поэтому невидим. Чтобы включить и выключить его, нажимайте на кнопочку возле букета. При наведении курсора мыши на кнопочку появится всплывающая подсказка Play/Pause. Плеер должен работать во всех браузерах. Приятного прослушивания!
|
|
Новые часы для блога в формате - HTML-5- много. ( Прокрутка справа)
15-03-2021 16:28
Это цитата сообщения Talya6 Оригинальное сообщение
Новые часы для блога в формате - HTML-5- много. ( Прокрутка справа).
комментарии: 4
понравилось!
вверх^
к полной версии
Это цитата сообщения Talya6 Оригинальное сообщение
Новые часы для блога в формате - HTML-5- много. ( Прокрутка справа).
Как превратить HTML аудиоплеер в круглую кнопку и разместить его поверх фонового изображения
14-03-2021 21:04
Это цитата сообщения Marina-Rozina Оригинальное сообщение
Как превратить HTML аудиоплеер в круглую кнопку и разместить его поверх фонового изображения
Обычный HTML аудиоплеер выглядит так
Его код:
<audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/0//51...e_my_brown_eyes_blue.mp3"></audio>
Атрибут «controls» здесь нужен обязательно, т.к. он добавляет панель управления к аудиофайлу. Атрибут «src» указывает путь к воспроизводимому файлу
Я размещу плеер в виде кнопки на изображении с анимацией, которую сама сделала. Далее
комментарии: 0
понравилось!
вверх^
к полной версии
Это цитата сообщения Marina-Rozina Оригинальное сообщение
Как превратить HTML аудиоплеер в круглую кнопку и разместить его поверх фонового изображения
Обычный HTML аудиоплеер выглядит так
Его код:
<audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/0//51...e_my_brown_eyes_blue.mp3"></audio>
Атрибут «controls» здесь нужен обязательно, т.к. он добавляет панель управления к аудиофайлу. Атрибут «src» указывает путь к воспроизводимому файлу
Я размещу плеер в виде кнопки на изображении с анимацией, которую сама сделала. Далее
Коллаж "У водопада"
12-03-2021 19:51
комментарии: 12
понравилось!
вверх^
к полной версии
Коллаж "Jardin Zen"
09-03-2021 19:16
комментарии: 0
понравилось!
вверх^
к полной версии
Коллаж "Поздравляю"
05-03-2021 20:44
Дорогие, женщины! Поздравляю Вас с праздником Весны 8 марта! Желаю: мира, любви, счастья, благополучия и крепкого здоровья!!!
Дорогие, женщины! Поздравляю Вас с праздником Весны 8 марта! Желаю: мира, любви, счастья, благополучия и крепкого здоровья!!!
Коллаж "Скрипач"
03-03-2021 20:41
Коллаж делала в Corel Paint Shop Pro v2020 и анимацию Animation Shop. При выполнении коллажа не получилась обводка внутри, в итоге некачественная анимация.
Урок здесь. Друзья, попробуйте и вы его выполнить!
Коллаж делала в Corel Paint Shop Pro v2020 и анимацию Animation Shop. При выполнении коллажа не получилась обводка внутри, в итоге некачественная анимация.
Урок здесь. Друзья, попробуйте и вы его выполнить!
Коллаж "Мишлен"
01-03-2021 14:32
комментарии: 0
понравилось!
вверх^
к полной версии
Коллаж "Дождик"
24-02-2021 14:26
Сегодня продолжила тестировать Corel PaintShop Pro 2020. Выполнила коллаж по уроку, который делала раньше (ссылки на урок у меня нет). Затем не закрывая программу сделала анимацию в программе Animation... Вот результат:
комментарии: 24
понравилось!
вверх^
к полной версии
Сегодня продолжила тестировать Corel PaintShop Pro 2020. Выполнила коллаж по уроку, который делала раньше (ссылки на урок у меня нет). Затем не закрывая программу сделала анимацию в программе Animation... Вот результат:
коллаж "Добрый вечер!"
22-02-2021 13:36
Продолжаю изучать возможности программы Corel Paint Shop Pro 2020. Сегодня пробую доработанную версию Corel Paint Shop Pro 2020 Unlimited 22.2.0.8. Сохранила, сделанный коллаж не до конца, в формате PSD. Потом его опять загрузила в Корелл и закончила работу.
Попробовала открыть сохраненный файл в ФШ. Загрузился отлично!
урок
комментарии: 15
понравилось!
вверх^
к полной версии
Продолжаю изучать возможности программы Corel Paint Shop Pro 2020. Сегодня пробую доработанную версию Corel Paint Shop Pro 2020 Unlimited 22.2.0.8. Сохранила, сделанный коллаж не до конца, в формате PSD. Потом его опять загрузила в Корелл и закончила работу.
Попробовала открыть сохраненный файл в ФШ. Загрузился отлично!
урок
Коллаж " Хорошая пора"
20-02-2021 19:41
Коллаж сделала в программе Corel PaintShop Pro v 2020. Решила проверить как она работает. Замечательно! Вот результат:
урок
комментарии: 23
понравилось!
вверх^
к полной версии
Коллаж сделала в программе Corel PaintShop Pro v 2020. Решила проверить как она работает. Замечательно! Вот результат:
урок
Календари с html кодом от Лили
31-01-2021 09:32
Это цитата сообщения LiSu Оригинальное сообщение
Календари с html кодом
комментарии: 0
понравилось!
вверх^
к полной версии
Это цитата сообщения LiSu Оригинальное сообщение
Календари с html кодом
|
Выберете подходяший вам информер и скопируйте его код в свой блог.
|
Инструментальная Пауза от Любаши
26-01-2021 17:51
комментарии: 0
понравилось!
вверх^
к полной версии
коллаж "зима"
10-01-2021 15:13
Наконец у нас выпал снег. Появилось желание что-то сделать. Вот результат:
Наконец у нас выпал снег. Появилось желание что-то сделать. Вот результат:
Коллаж "Последний день лета"
29-10-2020 20:30
комментарии: 4
понравилось!
вверх^
к полной версии
Поздравляю, счастья желаю, Таня!
08-10-2020 15:56
комментарии: 3
понравилось!
вверх^
к полной версии
Без заголовка
25-09-2020 19:38
Это цитата сообщения Быкова_Любаша Оригинальное сообщение
В продолжении темы флешек...
комментарии: 6
понравилось!
вверх^
к полной версии
Это цитата сообщения Быкова_Любаша Оригинальное сообщение
В продолжении темы флешек...
|
Серия сообщений "Уроки от Любаши К":
Часть 1 - Настраиваем ноут при закрытии крышки
Часть 2 - Делаем авку и собираем пазлы...
...
Часть 44 - Делаем коллажи онлайн
Часть 45 - Что можно сделать, когда не будет Adobe Flash Player
Часть 46 - В продолжении темы флешек...
Без заголовка
25-09-2020 13:59
Это цитата сообщения Быкова_Любаша Оригинальное сообщение
Что можно сделать, когда не будет Adobe Flash Player
комментарии: 0
понравилось!
вверх^
к полной версии
Это цитата сообщения Быкова_Любаша Оригинальное сообщение
Что можно сделать, когда не будет Adobe Flash Player
|
Серия сообщений "Уроки от Любаши К":
Часть 1 - Настраиваем ноут при закрытии крышки
Часть 2 - Делаем авку и собираем пазлы...
...
Часть 43 - Программа Торрент
Часть 44 - Делаем коллажи онлайн
Часть 45 - Что можно сделать, когда не будет Adobe Flash Player