# 视频标签 -video
1
2
3
4
| <video>
//假设要添加更多的播放源，就需要添加该标签
<source></source>
</video>
|
属性：
1）width、height 定义宽高 默认 300*150（视频拥有）
2）controls 规定标签是否显示视频播放控件 controls=‘controls’
3）src 文件路径
4）poster 规定视频加载时显示的照片（视频拥有）
5）paused 是否暂停了，true 表示暂停，false 表示播放了
6）currentTime 视频播放到当前哪个时间（可读写）
7）playbackRate 视频播放速度（1.0 正常播放，0.5 半速播放，2.0，2 倍播放）
8）muted 是否静音
9）volume 音量最大为 1，静音为 0，可每次减少 0.3
10）autoplay 视频在就绪后马上播放
11）loop 设置播放完了是否循环播放 loop=“loop”
12）preload 如果出现该属性，则视频在页面加载时进行加载，并 预备播放。如果使用 “autoplay”，则忽略该属性。
13）duration 媒体总时长（只读）
方法：
play() 播放视频
pause() 暂停播放
load() 更改视频源后重新加载视频，通过source更新的源必须重新load才能应用更改
# 音频标签 - audio
定义声音，比如音乐或其他音频流
元素支持的 3 种文件格式：MP3、Wav、Ogg
属性和方法与 video 类似
src 要播放的音频的 URL
autoplay 音频在就绪后马上播放
controls 是否显示控件
loop 设置播放完了是否循环播放 loop=“loop”
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
# source 标签
可以加载多个格式的视频、音频源文件，浏览器会按照它所支持的格式去加载
属性：
1
2
| type:视频 video/ogg、video/mp4、video/webm
音频 audio/ogg、audio/mpeg
|
检测浏览器对 H5+CSS3 能力的网站：
https://www.caniuse.com/
# 多媒体播放器实例
# 实例 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
margin-top: 20px;
width: 200px;
height: 20px;
background-color: #333;
position: relative;
}
#div2{
width: 50px;
height: 20px;
background-color: orange;
position: absolute;
top: 0;
left: 150px
}
#div3{
height: 20px;
background-color: green;
}
</style>
</head>
<body>
<!--
video标签的属性：
1、src: 视频源
2、controls 显示播放控件（默认无）
3、width ,height 默认是视频本身的宽高
4、poster="图片地址" 规定视频缩略图
5、paused、currentTime、muted、volume、duration、playbackRate这几个属性一般是通过JS动态控制，而不是将其当做标签属性直接写死
6、autoplay 默认不自动 视频加载完就自动播放，谷歌不允许你没有与用户交互就自动播放视频
7、loop 是否循环播放（默认只播放一次）
8、preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性
方法：
play() 播放视频
pause() 暂停播放
load()
-->
<video id="v" poster="../media/ice.jpg" src="../media/iceage4.mp4">
您的浏览器不支持video标签！
</video>
<!--使用div来定制播放器控件 -->
<div id="btns">
<button>播放</button>
<button>00:00:00</button>
<button>00:00:10</button>
<button>静音</button>
<button>全屏</button>
</div>
<!-- 音量进度条 -->
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
<script>
//选择所有的按钮
var btns=document.querySelectorAll("#btns button");
// 视频-获取视频对象，就可以使用该对象的属性和方法了
var v=document.getElementById("v");
// 定时器；
var timer=null;
// 给按钮绑定事件
btns[0].onclick=function(){
// 判断是否播放，如果播放，则暂停，否则播放
// paused如果为true，表示暂停，FALSE为播放
if(v.paused){
v.play();
this.innerText="暂停";
// 调用定时器，更新播放进度
timer=setInterval(showTime,500);
}else{
v.pause();
this.innerText="播放";
// 暂停播放时，清空定时器
clearInterval(timer);
}
};
// 显示当前播放时间
// 关键属性：v.currentTime 返回的是秒
function showTime(){
console.log(v.currentTime)
btns[1].innerText=formatTime(v.currentTime);
}
// var timer=setInterval(,1000);
// 格式化时间输出，将秒格式化为时分秒
function formatTime(t){
//4000? ==> 小时：分钟：秒
// 1小时：6分钟：40秒
// 小时
var h=toZero(parseInt(t/3600));//1
var m=toZero(parseInt(t%3600/60));//6;
var s=toZero(parseInt(t%60));//40;
// 00:00:00
return h+":"+m+":"+s;
}
// 调用
// console.log(formatTime(4000))
// 补0，也就是如果时间小于10，则前面加0
//
function toZero(num){
return num<10?"0"+num:num;
}
// 显示总时间
// 需要等待视频完全加载后，才去获取视频总时间
window.onload=function(){
btns[2].innerText=formatTime(v.duration)
}
// 静音功能
btns[3].onclick=function(){
// v.muted如果是true，则表示静音
if(v.muted){
// 取消静音
v.muted=false;
this.innerText="静音"
}else{
// 让其静音
v.muted=true;
this.innerText="取消静音"
}
}
// 全屏：有兼容性问题；
btns[4].onclick=function(){
// 通用
if(v.requestFullscreen) {
v.requestFullscreen();
// 火狐
} else if(v.mozRequestFullScreen) {
v.mozRequestFullScreen();
// IE
} else if(v.msRequestFullscreen){
v.msRequestFullscreen();
} else if(v.oRequestFullscreen){
v.oRequestFullscreen();
}
// 谷歌
else if(v.webkitRequestFullscreen)
{
v.webkitRequestFullScreen();
}
}
// 进度条
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var div3=document.getElementById("div3");
div2.onmousedown=function(event){
var disx=event.clientX-this.offsetLeft;
// console.log(disx);
div2.onmousemove=function(event){
var l=event.clientX-disx;
// console.log(l);
if(l<0){
l=0;
}
if(l>150){
l=150;
}
this.style.left=l+'px';
// 音量跟滑块的关系？？？
// 音量：
// v.volume==1,滑块在最右边150
// v.volume==0,滑块在最左边0
// v.volume=0.5,滑块在中间75
// v.volume可设置可获取，最大值是1，最小值是0
//走过的路/总共的路该比例算出来可以直接复制给音量，
//l/L=v.volume
v.volume=l/150;
// div的宽度就是拖动的距离，也就是l的值
div3.style.width=l+"px";
}
document.onmouseup=function(){
div2.onmousemove=null;
}
}
</script>
</body>
</html>
|
# 实例 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业1</title>
<link rel="stylesheet" href="reset.css">
<style>
.video-wrapper {
position: relative;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 100px auto;
width: 798px;
height: 573px;
background: url(images/bg.jpg);
}
.video-content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 58px auto;
width: 712px;
height: 469px;
}
.box {
height: 44px;
line-height: 44px;
background-color: #f3ebe9;
}
.bo {
margin-top: 13px;
padding-top: 1px;
width: 14px;
height: 14px;
background: url(images/sprite.png) no-repeat -13px -11px;
}
.pro {
margin-top: 13px;
padding-top: 1px;
width: 350px;
height: 12px;
background-color: #6f6f6f;
border-radius: 8px;
}
.btn {
width: 16px;
height: 17px;
background: url(images/handle.png);
position: absolute;
left: 0px;
top: -2px;
}
.red-line {
position: absolute;
top: 2px;
left: 0;
height: 100%;
height: 10px;
/* width: 100%; */
background: url(images/play-bar.png) repeat-x;
border-radius: 8px;
}
.current,
.all,
.line {
margin-top: -3px;
}
.laba {
width: 18px;
height: 14px;
background: url(images/sprite.png) no-repeat -89px -10px;
padding-top: 1px;
margin-top: 12px;
}
.lis {
margin-top: 13px;
padding-top: 1px;
width: 88px;
height: 12px;
background-color: #6f6f6f;
border-radius: 8px;
}
.btn2 {
width: 11px;
height: 10px;
background: url(images/volume.png);
position: absolute;
left: 77px;
top: 1px;
}
.man {
width: 14px;
height: 14px;
background: url(images/sprite.png) no-repeat -163px -11px;
padding-top: 1px;
margin-top: 12px;
}
</style>
</head>
<body>
<div class="video-wrapper">
<div class="video-content" id="con">
<!-- 视频 -->
<video id="video" width="712" height="403" src="media/iceage4.mp4" poster="images/mi4.png"></video>
<!-- 自定义播放器 -->
<div class="box clearfix none" id="box">
<div class="bo vam fl ml15 mr15" id="bo"></div>
<div class="fl pro pore clearfix mr15" id="pro">
<div class="red-line fl" id="red-line"></div>
<div class="btn fl" id="btn"></div>
</div>
<div class="fl vam current" id="current">00:00:00</div>
<div class="fl line ml5 mr5">/</div>
<div class="fl vam all" id="all">00:00:00</div>
<div class="laba fl ml10 mr10" id="laba"></div>
<div class="lis fl pore" id="lis">
<!-- <div class="red-line fl"></div> -->
<div class="btn2" id="btn2"></div>
</div>
<div class="fl man ml10" id="man"></div>
</div>
</div>
</div>
<!-- js代码 -->
<script>
var video = document.getElementById("video");
var timer = null;
// 血条
var div5 = document.getElementById("red-line");
// 可以拖动的按钮
var div4 = document.getElementById("btn");
// 移入才显示控件，移除就没有控件
var con = document.getElementById("con");
var box = document.getElementById("box");
con.onmouseover = function () {
box.style.display = "block";
}
con.onmouseout = function () {
box.style.display = "none";
}
// 播放按钮
var bo = document.getElementById("bo");
bo.onclick = function () {
if (video.paused) {
// video.play();
playPromise = video.play();
if (playPromise) {
playPromise.then(() => {
// 音频加载成功
// 音频的播放需要耗时
setTimeout(() => {
// 后续操作
// console.log("done.");
}, audio.duration * 1000); // audio.duration 为音频的时长单位为秒
}).catch((e) => {
// 音频加载失败
});
}
this.style.backgroundPosition = "-53px -12px";
timer = setInterval(showTime, 500);
} else {
video.pause();
this.style.backgroundPosition = "-13px -11px";
clearInterval(timer);
}
};
// 视频播完了，播放按钮显示为三角形
video.addEventListener('ended', function () { //结束
bo.style.backgroundPosition = "-13px -11px";
}, false);
// 静音功能
var laba = document.getElementById("laba");
laba.onclick = function () {
// v.muted如果是true，则表示静音
if (video.muted) {
// 取消静音
video.muted = false;
this.style.backgroundPosition = "-89px -10px";
} else {
// 让其静音
video.muted = true;
this.style.backgroundPosition = "-127px -10px";
}
}
// 全屏：有兼容性问题；
var man = document.getElementById("man");
man.onclick = function () {
// 通用
if (video.requestFullscreen) {
video.requestFullscreen();
// 火狐
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
// IE
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
} else if (video.oRequestFullscreen) {
video.oRequestFullscreen();
}
// 谷歌
else if (video.webkitRequestFullscreen) {
video.webkitRequestFullScreen();
}
}
// 显示当前播放时间
// 关键属性：v.currentTime 返回的是秒
var current = document.getElementById("current");
function showTime() {
current.innerText = formatTime(video.currentTime);
div4.style.left = div5.style.width = video.currentTime / video.duration * 334 + 'px';
}
// 显示总时间
// 需要等待视频完全加载后，才去获取视频总时间
var all = document.getElementById("all");
video.addEventListener("canplaythrough", function () {
all.innerText = formatTime(video.duration);
});
// 格式化时间输出，将秒格式化为时分秒
function formatTime(t) {
var h = toZero(parseInt(t / 3600)); //1
var m = toZero(parseInt(t % 3600 / 60)); //6;
var s = toZero(parseInt(t % 60)); //40;
// 00:00:00
return h + ":" + m + ":" + s;
}
// 补零函数
function toZero(num) {
return num < 10 ? "0" + num : num;
}
// 控制音量大小
var div1 = document.getElementById("lis");
// 可以拖动的按钮
var div2 = document.getElementById("btn2");
// 血条
// var div3=document.getElementById("red-line");
div2.onmousedown = function (event) {
var disx = event.clientX - this.offsetLeft;
div2.onmousemove = function (event) {
var l = event.clientX - disx;
if (l < 0) {
l = 0;
}
if (l > 77) {
l = 77;
}
this.style.left = l + 'px';
video.volume = l / 77;
// div3.style.width=l+"px";
}
document.onmouseup = function () {
div2.onmousemove = null;
}
}
// 视频进度
var div3 = document.getElementById("pro");
// 点击控制进度
div3.onclick = function (event) {
var disx = event.clientX - getPos(this).left;
if (disx > 334) {
disx = 334
}
div4.style.left = disx + 'px';
current.innerText = formatTime(video.currentTime);
video.currentTime = disx / 334 * video.duration;
div5.style.width = disx + "px";
}
// 绝对距离函数
function getPos(ele) {
var l = 0; //21,21,8
var t = 0;
while (ele.offsetParent) {
l += ele.offsetLeft + ele.offsetParent.clientLeft;
t += ele.offsetTop + ele.offsetParent.clientTop;
ele = ele.offsetParent;
}
return {
'left': l,
'top': t
};
}
// 拖动控制进度
div4.onmousedown = function (event) {
var disx = event.clientX - this.offsetLeft;
div4.onmousemove = function (event) {
var l = event.clientX - disx;
if (l < 0) {
l = 0;
}
if (l > 334) {
l = 334;
}
this.style.left = l + 'px';
div5.style.width = l + "px";
current.innerText = formatTime(video.currentTime);
video.currentTime = l / 334 * video.duration;
}
document.onmouseup = function () {
div4.onmousemove = null;
}
}
</script>
</body>
</html>
|
# 实例 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业2</title>
<link rel="stylesheet" href="reset.css">
<style>
ul li {
width: 100px;
height: 50px;
line-height: 50px;
}
ul {
margin: 100px auto;
height: 50px;
width: 700px;
}
.five {
background-color: #00FFFF;
}
</style>
</head>
<body>
<audio id="audio" src="nav/a4.mp3"></audio>
<ul class="clearfix">
<li class="fl font20 tc bgred">1</li>
<li class="fl font20 tc bgorange">2</li>
<li class="fl font20 tc bgyellow">3</li>
<li class="fl font20 tc bggreen">4</li>
<li class="fl font20 tc five">5</li>
<li class="fl font20 tc bgblue">6</li>
<li class="fl font20 tc bgpurple">7</li>
</ul>
<script>
var li = document.getElementsByTagName("li");
var ul = document.getElementsByTagName("ul");
var audio = document.getElementById("audio");
li[0].onmouseover = function () {
audio.src = "nav/a4.mp3"
}
li[1].onmouseover = function () {
audio.src = "nav/b4.mp3"
}
li[2].onmouseover = function () {
audio.src = "nav/c4.mp3"
}
li[3].onmouseover = function () {
audio.src = "nav/d4.mp3"
}
li[4].onmouseover = function () {
audio.src = "nav/e4.mp3"
}
li[5].onmouseover = function () {
audio.src = "nav/f4.mp3"
}
li[6].onmouseover = function () {
audio.src = "nav/g4.mp3"
}
ul[0].onmousemove = function () {
playPromise = audio.play();
if (playPromise) {
playPromise.then(() => {
// 音频加载成功
// 音频的播放需要耗时
setTimeout(() => {
// 后续操作
// console.log("done.");
}, audio.duration * 1000); // audio.duration 为音频的时长单位为秒
}).catch((e) => {
// 音频加载失败
});
}
}
</script>
</body>
</html>
|
