文章只是简单的对视频处理（开始、暂停、快进、快退、声音、循环播放等）。音视频方法属性方法基本相同。想要实现更多操作可参考API。
音视频参考手册：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
图片来自参考手册.png
图片来自参考手册.png
图片来自参考手册.png
运行效果：
image.png
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
video{
display: block;
margin: 0px auto;
}
#div{
width: 500px;
height: 100px;
margin: 0px auto;
margin-top: 100px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var vd = document.getElementById("vd");
var start = document.getElementById("start");
var pause = document.getElementById("pause");
var range = document.getElementById("range");
var spgo = document.getElementById("speedGo");
var spbc = document.getElementById("speedBack");
//开始
start.onclick = function(){
vd.play();
}
//暂停
pause.onclick = function(){
vd.pause();
}
//音量控制
range.onchange = function(){
document.title = this.value;
vd.volume = this.value/100;
}
//快进
spgo.onclick = function(){
vd.currentTime = vd.currentTime+10;
}
// 快退
spbc.onclick = function(){
vd.currentTime = vd.currentTime-10;
}
}
</script>
</head>
<body>
<div id="div">
<input type="button" name="" id="start" value="开始" />
<input type="button" name="" id="pause" value="暂停" />
<input type="button" name="" id="speedGo" value="快进" />
<input type="button" name="" id="speedBack" value="快退" />
<input type="range" name="range" id="range" min="0" max="100" value="100" />
</div>
<!--controls="controls" 进度条控制-->
<!--loop="loop" 循环播放-->
<!--autoplay="autoplay" 自动播放-->
<!--poster="图片链接" 设置视频封面-->
<video id="vd" src="../video和audio/young.mp4" controls="controls" loop="loop" width="800px"></video>
</body>
</html>
如有问题欢迎交流。
如转载请注明出处，谢谢！
网友评论