<!DOCTYPE html>
<
html
>
<
body
>
<
video
id
=
"video1"
controls
=
"controls"
width
=
"400px"
height
=
"400px"
>
<
source
src
=
"img/1.mp4"
>
</
video
>
<
p
>
<
button
onclick
=
"enableMute()"
type
=
"button"
>关闭声音</
button
>
<
button
onclick
=
"disableMute()"
type
=
"button"
>打开声音</
button
>
<
button
onclick
=
"playVid()"
type
=
"button"
>播放视频</
button
>
<
button
onclick
=
"pauseVid()"
type
=
"button"
>暂停视频</
button
>
<
button
onclick
=
"showFull()"
type
=
"button"
>全屏</
button
><
br
/>
<
span
>进度条:</
span
>
<
progress
value
=
"0"
max
=
"0"
id
=
"pro"
></
progress
>
<
span
>音量:</
span
>
<
input
type
=
"range"
min
=
"0"
max
=
"100"
value
=
"50"
onchange
=
"setvalue()"
id
=
"ran"
/>
</
p
>
<
script
>
var btn=document.getElementsByTagName("button");
var myvideo=document.getElementById("video1");
var pro=document.getElementById("pro");
var ran=document.getElementById("ran");
//关闭声音
function enableMute(){
myvideo.muted=true;
btn[0].disabled=true;
btn[1].disabled=false;
}
//打开声音
function disableMute(){
myvideo.muted=false;
btn[0].disabled=false;
btn[1].disabled=true;
}
//播放视频
function playVid(){
myvideo.play();
setInterval(pro1,1000);
}
//暂停视频
function pauseVid(){
myvideo.pause();
}
//全屏
function showFull(){
myvideo.webkitrequestFullscreen();
}
//进度条展示
function pro1(){
pro.max=myvideo.duration;
pro.value=myvideo.currentTime;
}
//拖动range进行调音量大小
function setvalue(){
myvideo.volume=ran.value/100;
myvideo.muted=false;
}
</
script
>
</
body
>
</
html
>