HomeAudio-VideoWEB МастеруСтатьи • Оригинальный КРУГЛЫЙ видео плеер для сайта


Оригинальный КРУГЛЫЙ видео плеер для сайта Экспериментируем с видео плеерами!

📝 Пост №   108  от 24 января 2023   |   В категории Audio-Video, WEB Мастеру, Статьи   |   Комментариев нет Print

circle-v-player

Для тех, ведет видео блог и публикует “кучу” роликов на своих страничках, наверняка этот вариант видео плеера будет интересен. Вместо стандартных прямоугольных плееров – этот плеер, уверен, внесет в ваш визуальный ряд своеобразную новизну.

А, если вы знакомы еще CSS, то сможете “пошаманить” с настройками и внести в блок плеера подпись, ссылку, кнопку-линк на полное видео, отобразив в этом плеере превью видео или трейлер..


Сегодня предлагаю вашему вниманию 2 варианта такого плеера. И, для полного представления о чем речь – смотрим живые примеры.

See the Pen
Circle Video Player-1
by Vadim Master (@Vadim-Master)
on CodePen.


Как видите – оригинальность на лицо!

Чтобы попробовать свои силы в правке кода, вам нужно посетить этот ресурс и начать “шаманить”, не опасаясь “поломать” исходник. Если, конечно, у вас есть навык и желание… Уверяю вас – очень занимательная процедура! Таким образом, вы сможете настроить плеер по своему вкусу, изменяя размер, позиционирование… в общем, приятно и с пользой провести время.

А второй плеер, опубликованный в моей коллекции отличается от представленного выше лишь тем, что имеет по окружности красную полоску – progress bar, а при клике на play – увеличение экрана воспроизведения ролика. В остальном же оба плеера выполняют свою основную функцию – воспроизведение видео.

Для того чтобы вы смогли “засунуть” в эти плееры видео с YouTube, вам нужно преобразовать стандартную ссылку в mp4 файл. Такой трюк с успехом выполняет ресурс SaveFrom.Net, где вы сможете сконвертировать ссылку на “ютубовский” ролик и получить mp4 файл.


circle-pl

Но, при этом получаем слишком длинную ссылку, что не совсем удобно, которую, для удобства, можно сократить, к примеру, здесь и вставить код плеера в строку “source src=“. С картинкой можно сделать то же самое, если ссылка, как удав… длинная. Но, в большинстве случаев, плеер сам “выдергивает” картинку из кадра видео.

Если же у вас экран черный и вы хотите вставить другую картинку-постер, то вам придется скопировать с любого кадра понравившееся изображение или найти в сети подходящее и скопировать ссылку на неё. Но, лучше всего сделать в графическом редакторе (при условии, что он у вас есть…) и загрузить к себе на сервер, сжав и отредактировав. Таким образом вы получаете свою ссылку на картинку-постер.

И, в заключение, скачать исходники с рабочими вариантами плееров и разместить у себя на сайте вы сможете по ссылке, внизу справа редактора, кликнув по кнопке “Export“.



Вот и все. Дерзайте!



Удачи и до новых встреч!
С уважением, MasterPRO
QR-код: <?php the_title(); ?>

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(1 оценок, среднее: 5,00 из 5)
Загрузка...


VIOLEWORKS Мини угловая, аккумуляторная шлифовальная машинка для батареи Makita 18V
Шлифовка, полировка деревянных, металлических (автополировка) и др. поверхностей.
Резка пластика, дерева, мягкого металла, гипсокартона, фанеры...


Просмотров страницы: 20
Метки: Web мастерувидеоНовости блога
Обновление статьи: 31.01.2023
Короткая ссылка:
Подпишись и получай новости в числе первых!

Народная мудрость



Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Вход на сайт

  |  


Архив

Мой YouTube


ПОДПИШИСЬ!




Мастерская Каминов и Интерьеров