Оригинальный КРУГЛЫЙ видео плеер для сайта Экспериментируем с видео плеерами!
Для тех, ведет видео блог и публикует “кучу” роликов на своих страничках, наверняка этот вариант видео плеера будет интересен. Вместо стандартных прямоугольных плееров – этот плеер, уверен, внесет в ваш визуальный ряд своеобразную новизну.
А, если вы знакомы еще 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 |
◄ Оригинальные музыкальные поздравления | Коллекция из 21-го CD диска треков + 41-го DVD диска с фильмами! ► |
Просмотров страницы: 20 Метки: Web мастеру ○ видео ○ Новости блога ○ Обновление статьи: 31.01.2023 Короткая ссылка:
|
Подпишись и получай новости в числе первых!
|
Народная мудрость