Видео и аудио плеер на HTML5 и CSS3 для uCoz
827материалов
228тем на форуме
3004комментария
6159пользователей

Видео и аудио плеер на HTML5 и CSS3 для uCoz


Описание:

Всем доброго времени суток! Как вы уже поняли, сегодня у нас речей пойдет о видео и аудио плеере. Давайте сразу о плюсах: ну во-первых, видео и аудио плеер сделаны в бело-серых тонах, во-вторых, плееры полностью адаптивны под все мобильные устройства, так как они построены на HTML5 и CSS3, в-третьих, скрипт очень легок в установке и имеете несколько вариантов (2 вида видео: с YouTube и свое) и самое главное не нагружает сайт и в-четвертых, я перевел скрипт с английского на русский язык. В материале используется демо, чтобы вы наглядно могли убедиться в легкосте и красоте!

Установка элементов видео и аудио плеера:

Для начала устанавливаем CSS:
Код
<link rel="stylesheet" href="/plr/plyr.css">

В нижнюю часть сайта, где будет видео или аудио плеер:
Код
<script>
(function(d, u){
var a = new XMLHttpRequest(),
b = d.body;
if("withCredentials" in a) {
a.open("GET", u, true);
a.send();
a.onload = function(){
var c = d.createElement("div");
c.setAttribute("hidden", "");
c.innerHTML = a.responseText;
b.insertBefore(c, b.childNodes[0]);
}
}
})(document, "/plr/sprite.svg");
</script>
<script src="/plr/plyr.js"></script>
<script src="/plr/docs.js"></script>

Скрипт для видео с сайта YouTube:

В том место, где хотите видеть видеоплеер вставляете код:
Код
<section class="panel example-video" id="youtube">
<div class="player">
<div data-video-id="blO3Yb8nZ18" data-type="youtube"></div>
</div>
</section>
В коде находите:
Код
data-video-id="blO3Yb8nZ18"
И blO3Yb8nZ18 меняете на ID видео с YouTube. (как получить ID видео (смотрите что выделено в оранжевый прямоугольник))

Если вы будете использовать собственное видео:

В том место, где хотите видеть видеоплеер вставляете код:
Код
<section class="panel example-video active" id="video">
<div class="player">
<video poster="http://webmaster-ucoz.ru/ucoz/1/plr/uCoz.png" controls crossorigin>
<source src="http://webmaster-ucoz.ru/ucoz/1/plr/uCoz.mp4" type="video/mp4">
</div>
</section>

Ссылка на постер видео:
Код
http://webmaster-ucoz.ru/ucoz/1/plr/uCoz.png

Ссылка на видео:
Код
http://webmaster-ucoz.ru/ucoz/1/plr/uCoz.mp4

Код аудио плеера:

В том место, где хотите видеть аудио плеер вставляете код:
Код
<section class="panel example-audio" id="audio">
<div class="player">
<audio controls>
<source src="http://webmaster-ucoz.ru/ucoz/1/plr/juliana_karaulova.mp3" type="audio/mp3">
</audio>
</div>
</section>

Ссылка на mp3 файл:
Код
http://webmaster-ucoz.ru/ucoz/1/plr/juliana_karaulova.mp3

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 08.01.2016 в 19:00
Материал просмотрен: 7148 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 82 комментария

Пожаловаться
Сказать спасибо

82 комментария


Rita
Рита @Rita 04.09.2015 23:391
+13
Очень красиво смотрится. Спасибо! like
Romchik
Домнин Роман @Romchik 05.09.2015 20:274
+8
Всегда пожалуйста!
Albina-Danes
Отлично. Для первого кода не закрыт тег </section>
Romchik
Домнин Роман @Romchik 05.09.2015 20:275
+8
Спасибо, исправили
Валера Рагозин 05.09.2015 18:043
+7
Спасибо, у меня даже на samsung galaxy s2 работает like
Romchik
Домнин Роман @Romchik 05.09.2015 20:276
+8
Не за что, старался)
smirno_valentina
Щас очень трудно найти красивый видео или аудио плеер. Это плеер мне очень понравился, очень прост в установке, даже блондинка поймет humor laughing happy Спасибо, с меня + в репутацию like
Romchik
Домнин Роман @Romchik 06.09.2015 19:208
+6
Не за что!!!
avatar
Rutina @rutina 07.09.2015 08:099
+6
Спасибо за пллер.
Romchik
Обращайтесь
1 2 3 ... 7 8 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта