Как сделать собственный видео-плеер на HTML5
Вы часто задумывались над тем, как красиво оформить видео-проигрыватель на своем сайте, при это не использовать стандартные проигрыватели такие как youtube или vimeo, ведь их родные видео-проигрыватели не обладают необходимой кастомизацией которая порой так необходима для разработчика, тогда возникает необходимость создать нечто свое, затратив при этом минимум усилий и получить желаемый результат, в данном уроке мы рассмотрим как создать именно такой замечательный проигрыватель с полноэкранным просмотром.
У нас будет небольшой плеер, в котором будет слегка закруглены углы, кроме этого мы добавим контролеры управления, которые будут включать в себя: временной отрезок, регулятор громкости, полноэкранный режим и кнопка проигрывания.
Шаг 1. HTML
Как мы уже говорили ранее нам необходимо подключить много элементов, но их нам необходимо заключить в специальный контейнер который будет стилизованный:
Кроме этого мы подключаем самый главный элемент-видео файл, кроме этого мы заготовили изображение, которое будет заставкой для плеера.
Шаг 2. CSS
Теперь со стилями, нам необходимо оформить, для начала определяем параметры контейнера, затем по очередности подключать каждый элемент. Мы указали заголовки к коду, чтобы было понятней.
После завершения стилей перейдем к последнему шагу.
Шаг 3. JS
Последним, но не менее важным шалом будет добавление элементов воспроизведения и общих параметров как громкость, разворот во весь экран и прогрузка видео:
[code]
1
(document).ready(function(){
2
var video = $('#myVideo');
3
video[0].removeAttribute("controls");
4
$('.control').fadeIn(500);
5
$('.caption').fadeIn(500);
6
video.on('loadedmetadata', function() {
7
$('.current').text(timeFormat(0));
8
$('.duration').text(timeFormat(video[0].duration));
9
updateVolume(0, 0.7);
10
setTimeout(startBuffer, 150);
11
$('.videoContainer')
12
.hover(function() {
13
$('.control').stop().fadeIn();
14
$('.caption').stop().fadeIn();
15
}, function() {
16
if(!volumeDrag && !timeDrag){
17
$('.control').stop().fadeOut();
18
$('.caption').stop().fadeOut();
19
}
20
})
21
.on('click', function() {
22
$('.btnPlay').find('.icon-play').addClass('icon-pause').removeClass('icon-play');
23
$(this).unbind('click');
24
video[0].play();
25
});
26
});
27
var startBuffer = function() {
28
var currentBuffer = video[0].buffered.end(0);
29
var maxduration = video[0].duration;
30
var perc = 100 * currentBuffer / maxduration;
31
$('.bufferBar').css('width',perc+'%');
32
if(currentBuffer 100) {
120
percentage = 100;
121
}
122
if(percentage 100) {
157
percentage = 100;
158
}
159
if(percentage 0.5){
168
$('.sound').removeClass('muted').addClass('sound2');
169
}
170
else{
171
$('.sound').removeClass('muted').removeClass('sound2');
172
}
173
};
174
var timeFormat = function(seconds){
175
var m = Math.floor(seconds/60)
У нас будет небольшой плеер, в котором будет слегка закруглены углы, кроме этого мы добавим контролеры управления, которые будут включать в себя: временной отрезок, регулятор громкости, полноэкранный режим и кнопка проигрывания.
Шаг 1. HTML
Как мы уже говорили ранее нам необходимо подключить много элементов, но их нам необходимо заключить в специальный контейнер который будет стилизованный:
1
2
3
4
5
Your browser does not support the video tag.
6
7
Prometheus
8
9
10
11
12
13
14
15
16
17
20
21
22
23
24
25
Кроме этого мы подключаем самый главный элемент-видео файл, кроме этого мы заготовили изображение, которое будет заставкой для плеера.
Шаг 2. CSS
Теперь со стилями, нам необходимо оформить, для начала определяем параметры контейнера, затем по очередности подключать каждый элемент. Мы указали заголовки к коду, чтобы было понятней.
1
video { border-radius: 6px; }
2
/* Контейнер видео */
3
.videoContainer{
4
width:380px;
5
height:163px;
6
position:relative;
7
overflow:hidden;
8
background:#000;
9
color:#ccc;
10
border-radius: 6px;
11
border: 1px solid rgba(0,0,0,0.8);
12
box-shadow: 0 0 5px rgba(0,0,0,0.5);
13
margin: 50px auto 0;
14
}
15
.videoContainer:before {
16
content: '';
17
position: absolute;
18
top: 0;
19
right: 0;
20
bottom: 0;
21
left: 0;
22
box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
23
z-index: 6;
24
border-radius: 6px;
25
pointer-events: none;
26
}
27
/* Надпись на видео*/
28
.caption{
29
display:none;
30
position:absolute;
31
top:0;
32
left:0;
33
width:100%;
34
padding: 5px 10px;
35
color:#ddd;
36
font-size:14px;
37
font-weight:300;
38
text-align: center;
39
background: rgba(0,0,0,0.4);
40
text-transform: uppercase;
41
border-radius: 6px 6px 0 0;
42
-webkit-backface-visibility: hidden;
43
-moz-backface-visibility: hidden;
44
-ms-backface-visibility: hidden;
45
}
46
/*** Управление видео ***/
47
/* кнопки контроля */
48
.control{
49
color:#ccc;
50
position:absolute;
51
bottom:10px;
52
left:10px;
53
width:360px;
54
z-index:5;
55
display:none;
56
}
57
.btmControl{
58
clear:both;
59
}
60
.control .btnPlay {
61
float:left;
62
width:34px;
63
height:30px;
64
padding:5px;
65
background: rgba(0,0,0,0.5);
66
cursor:pointer;
67
border-radius: 6px 0 0 6px;
68
border: 1px solid rgba(0,0,0,0.7);
69
box-shadow: inset 0 0 1px rgba(255,255,255,0.5);
70
}
71
.control .icon-play{
72
background:url(/vp_sprite.png) no-repeat -11px 0;
73
width: 6px;
74
height: 9px;
75
display: block;
76
margin: 4px 0 0 8px;
77
}
78
.control .icon-pause{
79
background:url(/vp_sprite.png) no-repeat -34px -1px;
80
width: 8px;
81
height: 9px;
82
display: block;
83
margin: 4px 0 0 8px;
84
}
85
.control .selected{
86
font-size:15px;
87
color:#ccc;
88
}
89
.control .sound{
90
width: 30px;
91
height: 30px;
92
float:left;
93
background: rgba(0,0,0,0.5);
94
border: 1px solid rgba(0,0,0,0.7);
95
border-left: none;
96
box-shadow: inset 0 0 1px rgba(255,255,255,0.5);
97
cursor: pointer;
98
}
99
.control .icon-sound {
100
background:url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat -19px 0;
101
width: 13px;
102
height: 10px;
103
display: block;
104
margin: 8px 0 0 8px;
105
}
106
.control .muted .icon-sound{
107
width: 7px !important;
108
}
109
.control .btnFS{
110
width: 30px;
111
height: 30px;
112
border-radius: 0 6px 6px 0;
113
float:left;
114
background: rgba(0,0,0,0.5);
115
border: 1px solid rgba(0,0,0,0.7);
116
border-left: none;
117
box-shadow: inset 0 0 1px rgba(255,255,255,0.5);
118
}
119
.control .icon-fullscreen {
120
background:url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat 0 0;
121
width: 10px;
122
height: 10px;
123
display: block;
124
margin: 8px 0 0 9px;
125
}
126
/* Ползунок проигрывания */
127
.progress-bar {
128
height: 30px;
129
padding: 10px;
130
background: rgba(0,0,0,0.6);
131
border: 1px solid rgba(0,0,0,0.7);
132
border-left: none;
133
box-shadow: inset 0 0 1px rgba(255,255,255,0.5);
134
float:left;
135
}
136
.progress {
137
width:240px;
138
height:7px;
139
position:relative;
140
cursor:pointer;
141
background: rgba(0,0,0,0.4);
142
box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 1px 1px rgba(0,0,0,1);
143
border-radius:10px;
144
}
145
.progress span {
146
height:100%;
147
position:absolute;
148
top:0;
149
left:0;
150
display:block;
151
border-radius:10px;
152
}
153
.timeBar{
154
z-index:10;
155
width:0;
156
background: -webkit-linear-gradient(top, rgba(107,204,226,1) 0%,rgba(29,163,208,1) 100%);
157
box-shadow: 0 0 7px rgba(107,204,226,.5);
158
}
159
.bufferBar{
160
z-index:5;
161
width:0;
162
background: rgba(255,255,255,0.2);
163
}
164
/* Громкость */
165
.volume{
166
position:relative;
167
cursor:pointer;
168
width:70px;
169
height:10px;
170
float:right;
171
margin-top:10px;
172
margin-right:10px;
173
}
174
.volumeBar{
175
display:block;
176
height:100%;
177
position:absolute;
178
top:0;
179
left:0;
180
background-color:#eee;
181
z-index:10;
182
}
После завершения стилей перейдем к последнему шагу.
Шаг 3. JS
Последним, но не менее важным шалом будет добавление элементов воспроизведения и общих параметров как громкость, разворот во весь экран и прогрузка видео:
[code]
1
(document).ready(function(){
2
var video = $('#myVideo');
3
video[0].removeAttribute("controls");
4
$('.control').fadeIn(500);
5
$('.caption').fadeIn(500);
6
video.on('loadedmetadata', function() {
7
$('.current').text(timeFormat(0));
8
$('.duration').text(timeFormat(video[0].duration));
9
updateVolume(0, 0.7);
10
setTimeout(startBuffer, 150);
11
$('.videoContainer')
12
.hover(function() {
13
$('.control').stop().fadeIn();
14
$('.caption').stop().fadeIn();
15
}, function() {
16
if(!volumeDrag && !timeDrag){
17
$('.control').stop().fadeOut();
18
$('.caption').stop().fadeOut();
19
}
20
})
21
.on('click', function() {
22
$('.btnPlay').find('.icon-play').addClass('icon-pause').removeClass('icon-play');
23
$(this).unbind('click');
24
video[0].play();
25
});
26
});
27
var startBuffer = function() {
28
var currentBuffer = video[0].buffered.end(0);
29
var maxduration = video[0].duration;
30
var perc = 100 * currentBuffer / maxduration;
31
$('.bufferBar').css('width',perc+'%');
32
if(currentBuffer 100) {
120
percentage = 100;
121
}
122
if(percentage 100) {
157
percentage = 100;
158
}
159
if(percentage 0.5){
168
$('.sound').removeClass('muted').addClass('sound2');
169
}
170
else{
171
$('.sound').removeClass('muted').removeClass('sound2');
172
}
173
};
174
var timeFormat = function(seconds){
175
var m = Math.floor(seconds/60)
Или просто расскажите своим друзьям, может именно эта новость им сейчас пригодится!
