Про HTML5 плеер

Всем Здравствуйте... Перенесла этот урок по вашей просьбе из старого Дневника. Как сделать HTML плеер, который может работать без Адобе флеш плеера.

пост составила

Серия сообщений "Уроки от Любаши К":

Часть 1 - Настраиваем ноут при закрытии крышки
Часть 2 - Делаем авку и собираем пазлы...
...
Часть 31 - Как сделать аудио плейлист на сайте uppod.ru
Часть 32 - Как сделать плейлист по скинам на сайте uppod.ru
Часть 33 - Про HTML5 плеер

Как сделать аудио плейлист на сайте uppod.ru

Всем Здравствуйте... Сегодня урок по вашей просьбе. Как собрать вот такие плейлисты, аудио и видео.

пост составила

Серия сообщений "Уроки от Любаши К":

Часть 1 - Настраиваем ноут при закрытии крышки
Часть 2 - Делаем авку и собираем пазлы...
...
Часть 29 - Анимированный текст
Часть 30 - Как загрузить программу REFACE на компьютер
Часть 31 - Как сделать аудио плейлист на сайте uppod.ru
Часть 32 - Как сделать плейлист по скинам на сайте uppod.ru
Часть 33 - Про HTML5 плеер

Видео плеер, который также может работать без Adobe Flash Player

Цитата сообщения меня_зовут_Любаша_К Прочитать целикомВ свой цитатник или сообщество! Здравствуйте... Не так давно я рассказала вам про аудио плеер, который может работать без Adobe Flash Player. Сегодня расскажу про видео плеер, который также работает без Adobe Flash Player. Вот пример такого видео плеера. Можете проверить, отключив Adobe Flash Player в вашем браузере и обновив страничку с плеером. Ещё в этот код можно вставить анимированную заставку, которая будет видна до включения воспроизведения. Смотрите. Теперь я расскажу, как это сделать. Берём код видео плеера в окне ниже.<video src="<a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http:////img0.liveinternet.ru/images/attach/d/1//5002/5002546_smeshnuye_onlayn_video_roliki.mp4"" target="_blank">//img0.liveinternet.ru/images/attach/d/1//5002/500..._onlayn_video_roliki.mp4"</a> width="480" height="270" poster="poster.gif" controls="controls"></video> Ролик загружаем в новую запись с компьютера через Обзор, он будет в виде вложения. Потом ссылку Вложения вставляем в код видео плеера, аккуратно, не стерев нужного. Но есть одно НО...Ролики загружать на Лиру можно не более 8 Мб, помните об этом. Если у вас ролики в другом формате, то их можно конвертировать на онлайн сервисе вот Тут. Если сайт выйдет на английском языке, наверху есть окно для изменения языка. Также для скачивания роликов с Интернета в формате mp4, можно воспользоваться расширениями для браузеров. Video DownloadHelper 4.9.14. - для Мозиллы В других браузерах тоже есть подобные расширения, я уверена...)) Но обязательно внимательно смотрите при скачивании, в каком формате ролик и сколько он весит. На этом всё, всем удачи...)) урок провела Любаша К

Как превратить HTML аудиоплеер в круглую кнопку и разместить его поверх фонового изображения

Уважаемые друзья! Вдруг с ужасом обнаружила, что пропал внутренний фон рамочки в уроке. Перезалила его.
Чтобы исправить урок у себя, пожалуйста, замените ссылку
http://www.yapfiles.ru/files/2319206/1.jpg
на
https://s01.yapfiles.ru/files/2359869/1.jpg
Приношу вам свои извинения
 

Обычный HTML аудиоплеер выглядит так

Его код:

---

<audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/0//5181/5181570_clous_van_mechelen__dont_make_my_brown_eyes_blue.mp3"></audio>

---

Атрибут «controls» здесь нужен обязательно, т.к. он добавляет панель управления к аудиофайлу. Атрибут «src» указывает путь к воспроизводимому файлу


Я размещу плеер в виде кнопки на изображении с анимацией, которую сама сделала. У меня получилось так

Про прямые ссылки на музыку со сторонних сайтов

Всем Здравствуйте... Сегодня мы поговорим с вами о прекрасном, т.е. о Музыке...))) И не просто о музыке, а о прямых муз. ссылках, которые вставляем в плеера. Плееры есть флеш, которые уже отмирают постепенно, а есть с HTML кодом, которые, как выяснилось, можно также украсить, сделать его не серым и невзрачным, а красивым и привлекательным...)) Уроки про это уже пишут многие, в том числе и я. Также выставляют плееры, пользуйтесь на здоровье, так сказать... Многие, чтобы взять прямую ссылку для вставки в плеер, сначала скачивают музыку к себе на комп, потом загружают в новую запись Лиру, в простом редакторе. А другие, находят муз. сайты и берут ссылки оттуда... Но брать ссылки с таких сайтов нужно только статичные, а не динамичные, которые через некоторое время меняют свой адрес и тогда музыка с такой ссылкой звучать в вашем Дневнике уже не будет. Увы...

пост составила

Прочитал сам - покажи другому!

Серия сообщений "Уроки от Любаши К":

Часть 1 - Настраиваем ноут при закрытии крышки
Часть 2 - Делаем авку и собираем пазлы...
...
Часть 17 - Сайт для вашего пользования
Часть 18 - Видео стало видно на Лиру...
Часть 19 - Про прямые ссылки на музыку со сторонних сайтов

Аудиоплееры с html кодом - 2

В плеерах звучат песни Станислава Пожлакова.

пост составила

Серия сообщений "Аудиоплееры":

Часть 1 - Аудиоплееры с html кодом
Часть 2 - Аудиоплееры с html кодом - 2
Часть 3 - Аудиоплееры с html кодом - 3

Сайт для вашего пользования

Всем Здравствуйте... Уверена, что все вы знаете и пользовались ранее музыкальным сайтом под названием "Простоплеер".

пост составила

Прочитал сам - покажи другому!

Серия сообщений "Уроки от Любаши К":

Часть 1 - Настраиваем ноут при закрытии крышки
Часть 2 - Делаем авку и собираем пазлы...
...
Часть 15 - Как вставить картинку в пост с Яндекс коллекции
Часть 16 - Как удалить рекламу из Почты майла, с сайта ОК и т.д...
Часть 17 - Сайт для вашего пользования

Плеер "Журавли"

 

Автор:Елена_Краева

Серия сообщений "ПЛЕЕРЫ, ВИДЕОПЛЕЕРЫ, УРОКИ.":
Часть 1 - Перепост. Как вставить ПЛЕЕР в пост на Лиру (подробно)
Часть 2 - Плеер - невидимка.
...
Часть 38 - Советую.Про плеер, прямые ссылки и другое.
Часть 39 - Плеер "Ослик" с прикольными поздравлениями + урок.
Часть 40 - Плеер "Журавли"

Возвращаясь к написанному....




Всем Здравствуйте...

Вчера я выставила урок

Как сделать Плейлист с песнями, который будет работать без Adobe Flash Player

Урок процитировали 61 раз, смотрели намного больше...
Но никто, видать, не сделал плейлист по этому уроку, только ОДИН! пользователь.
И, когда у неё не получилось взять код, она написала мне...
Я сначала подумала, что пользователь сделала что-то не так.
Попросила у неё ссылку на её плейлист. А потом решила взять код
из своего плейлиста, сделанного ранее... И у меня НИЧЕГО не получилось...
Сначала... Через пару минут я поняла, как сделать исправление в коде,
чтобы его можно было показать вам. Смотрим скрины и делаем так...

Как сделать Плейлист с песнями, который будет работать без Adobe Flash Player

Всем Здравствуйте... Сегодня я расскажу где и как сделать Плейлист, чтобы его можно было видеть и главное слышать тогда, когда Адобе флеш плеер перестанет работать в браузерах. Для этого нам нужен сайт, под названием - Архив.орг, я вас уже с ним знакомила раньше.

пост составила

Прочитал сам - покажи другому!

Серия сообщений "Уроки от Любаши К":

Часть 1 - Настраиваем ноут при закрытии крышки
Часть 2 - Делаем авку и собираем пазлы...
...
Часть 7 - Как перевернуть видео
Часть 8 - Как вставить шрифт в систему
Часть 9 - Как сделать Плейлист с песнями, который будет работать без Adobe Flash Player

Как превратить HTML аудиоплеер в круглую кнопку и разместить его поверх фонового изображения - повтор поста по просьбе

Обычный HTML аудиоплеер выглядит так

Его код:

---

<audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/0//51...e_my_brown_eyes_blue.mp3"></audio>

---

Атрибут «controls» здесь нужен обязательно, т.к. он добавляет панель управления к аудиофайлу. Атрибут «src» указывает путь к воспроизводимому файлу


Я размещу плеер в виде кнопки на изображении с анимацией, которую сама сделала. У меня получилось так

Плеер с музыкой из YouTube

Читать далее...

Плеер для ваших постов с html кодом

Всем здравствуйте... После моего поста про В. С. Высоцкого, у меня попросили код плеера, который был в том посте. Я решила не высылать его в комментарии, а показать всем, в виде урока, может кому ещё пригодится...))) Конечно, такие плеера больше подходят для тёмного фона, но можно сделать и для светлого, ведь в коде плеера можно поменять цвет плеера, цвет обводки, сделать его закруглённым или оставить прямоугольным. Ниже вы видите несколько плееров с песнями, разного цвета, разного оформления, при наведении курсора на плеер можно увидеть название песни.

Музыкальные плееры для вас...)) - 2




<center><table background="https://ic.wampi.ru/2021/03/13/1.gif" border="0" cellpadding="0" height="88" width="226"><tbody><tr><td align="center" height="30" style="padding: 0px;" valign="bottom" width="30"><audio controls="controls" src="https://static.tunnel.ru/media/audio/2020-10/post_comment/1069276//01.-klenovyiy-list.mp3" style="width: 10px; height: 10px; border-radius: 100px; box-shadow: 0 0 0 3px #ffffff; background-color: black;" type="audio"></audio><br /><br /></td></tr></tbody></table></center>

Серия сообщений "Аудиоплееры":

Часть 1 - Аудиоплееры с html кодом
Часть 2 - Аудиоплееры с html кодом - 2
...
Часть 8 - Аудиокниги Ю. Вознесенской
Часть 9 - Музыкальные плееры для вас...))
Часть 10 - Музыкальные плееры для вас...)) - 2
Часть 11 - Музыкальные плееры для вас...)) - 3
Часть 12 - Музыкальные плееры для вас...)) - 4

Евгений Коновалов - "Фиалка алая"

Думаю, что этого вам хватит...)))

Плейлист можно сделать несколькими способами...
С этого сайта, там написано, как его делать...
http://www.favormusic.ru/generator_f6.html


" target="_blank">http://static.tunnel.ru/media/audio/2017-11/post/1...h=250&height=150&showvolume=1]

__________________________________________________

Также на этом сайте...
http://uppod.ru/

Вот такой плеер или по вашему стилю...








P. S. - Внимание!
Если, при взятии кода плейлиста, у вас выходит, что это невозможно, что Для генератора кода необходимо указать свои пути к файлам, делаем так, как на скрине ниже. Сделать это нужно один раз. Я не помню, что я так делала и поэтому не рассказала в уроке. Но сегодня у меня уже двое спросили про это, поэтому дополняю урок.

Заходим сюда



Чтобы взять такую ссылку, вам нужно загрузить в новую запись плеер, который вы скачали с сайта.



У меня вот такой, например, у вас будет свой.

//img0.liveinternet.ru/images/attach/c/8//4050/4050380_uppod.swf

Как только вставите и сохраните, у вас выйдет другое окно, куда нужно тоже вставить ссылки, смотрите, как у меня и делайте также...




Это тоже для информации...





Аудиоплейлист с детскими песнями.




_________________________________________________________

Можно сделать вот такой плейлист -








Скачать папку для сборки плейлиста бесплатно тут

___________________________________________________

Помещаем музыку в флешку

Вот сама флешка Это ее вид, из чего она состоит Идете в галлерею плейкастов http://www.playcast.ru/?module=playcast_search Находите, например, рубрику "Душа танца" Щелкаем по плейкасту. Внизу, где звук ( обведено красным) нажимаем правой клавишей мыши всплыло окошечко "свойства элемента". Выделяем адрес, он подчеркнут, до точки "." Вот так: А теперь вставляем его на место того, который стоял во флешке. Вот это цвета флешки и ползунка backcolor=FFCCCC&frontcolor=980000 Я полагаю, что с цветами разберетесь. Меняете FFCCCC и 980000 на нужные вам цвета Рада, если помогла разобраться. Просто сегодня возник вопрос. Я постаралась в скинах дать ответ.

Оформление плееров на ли ру.

Читать далее...

HTML5 для ЛиРу - коды плееров

Музыкальные альбомы для скачивания

Для тех пользователей, кто делает музыкальные посты, возможно пригодится сайт, который я вам сегодня представляю. Пригодится и тем, кто просто скачивает музыку к себе на компьютер для прослушивания. Заходим по ссылке ниже и начинаем знакомиться.

пост составила