-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path2.html
161 lines (154 loc) · 4.2 KB
/
2.html
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<video id="video" src="4_1.mp4" width="600">当前浏览器不支持video元素</video>
<div id="progressTime" style="display:none">
<div style="float:left">
<progress id="progress" max="100" style="width:450px">
</progress>
</div>
<div id="showTime" style="float:left;margin-left:15px"></div>
<div style="clear:both"></div>
</div>
<br>
<input type="button" id ="btnPlay" onclick="playOrPause()" value="播放"/>
<input type="button" id="btnSpeedUp" onclick="speedUp()" value="快放" />
<input type="button" id="btnSpeedUpDown" onclick="speedDown()" value="慢放" />
<input type="button" id="btnVolumeUp" onclick="volumeUp()" value="提高音量" />
<input type="button" id="btnVolumeDown" onclick="volumeDown()" value="降低音量" />
</body>
<script>
var speed=1; //播放速度
var volume=1; //播放音量
var video=document.getElementById("video");
var playBtn=document.getElementById("btnPlay");
var btnSpeedUp=document.getElementById("btnSpeedUp");
var btnSpeedUpDown=document.getElementById("btnSpeedUpDown");
var btnVolumeUp=document.getElementById("btnVolumeUp");
var btnVolumeDown=document.getElementById("btnVolumeDown");
var showTime=document.getElementById("showTime");
video.addEventListener('timeupdate',updateProgress,false); //为播放器添加时间改变监听事件
var progress=document.getElementById("progress");
progress.onclick=progressOnClick; //为progress控件添加点击事件
//播放或暂停
function playOrPause()
{
var progressTime=document.getElementById("progressTime");
progressTime.style.display=""; //显示播放进度条和时间
if(video.paused) //如果当前播放状态为暂停，点击后开始播放
{
playBtn.value="暂停";
video.play();
video.playbackRate=speed;
video.volume=volume;
//启用控制工具条其他按钮
btnSpeedUp.disabled="";
btnSpeedUpDown.disabled="";
btnVolumeUp.disabled="";
btnVolumeDown.disabled="";
}
else //如果当前播放状态为播放，点击后暂停播放
{
playBtn.value="播放";
video.pause();
//禁用控制条其他按钮
btnSpeedUp.disabled="disabled";
btnSpeedUpDown.disabled="disabled";
btnVolumeUp.disabled="disabled";
btnVolumeDown.disabled="disabled";
}
}
function speedUp()
{
video.playbackRate+=1;
speed=video.playbackRate;
}
//降低播放速度
function speedDown()
{
if(video.playbackRate>0.5)
{
video.playbackRate-=0.1;
}
console.log(video.playbackRate);
if(video.playbackRate<=0.5)
{
alert("已经是最低速度啦~");
// video.playbackRate=0;
}
speed=video.playbackRate;
}
//增大音量
function volumeUp()
{
if(video.volume<1)
{
video.volume+=0.1;
if(video.volume>0)
{
video.muted=false;
}
}
volume=video.volume;
}
//降低音量
function volumeDown()
{
if(video.volume>0)
{
video.volume-=0.1;
if(video.volume==0)
{
video.muted=true;
}
}
volume=video.volume;
}
//播放进度条点击事件，点击后从点击位置开始播放
function progressOnClick(event)
{
var progress=document.getElementById("progress");
if(event.offsetX) //获取鼠标当前点击位置与当前位置相比存在偏移量
{
video.currentTime=video.duration*(event.offsetX/progress.clientWidth); //设定播放器新的播放位置
}
else
{
video.currentTime=video.duration*(event.clientX/progress.clientWidth);
}
}
function updateProgress()
{
var currentPercent=Math.round(Math.floor(video.currentTime)/Math.floor(video.duration)*100,0);//计算当前播放时长与视频总时长之比
var progress=document.getElementById("progress");
progress.value=currentPercent;
showTime.innerHTML=calculateTime(Math.floor(video.currentTime))+"/"+calculateTime(Math.floor(video.duration));//显示播放时间
}
function calculateTime(time)
{
var h;
var m;
var s;
h=String(parseInt(time/3600,10));
if(h.length==1)
{
h='0'+h;
}
m=String(parseInt((time%3600)/60,10));
if(m.length==1)
{
m='0'+m;
}
s=String(parseInt(time%60),10)
if(s.length==1)
{
s='0'+s;
}
return h+":"+m+":"+s;
}
</script>
</html>