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

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

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

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

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

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

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

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

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

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

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

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

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

---

Удачи и до новых встреч! С уважением, MasterPRO

---

---

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

---

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

---

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