在video标签出现之前，如果想在网页中播放视频或者音频数据是非常困难的。H5中的video标签可以向使用img显示图片一样简单去播放视频。 video提供了很多属性和方法，我们可以通过直接设定或者通过js控制视频的显示
标签属性
- autoplay ：自动播放
- controls ：显示进度条
- loop：循环播放
- muted：静音
- poster：封面
方法
- play() 开始播放
- pause() 暂停
- paused() 切换，是否为暂停状态
- volume 控制音量
- currentTime 当前播放秒数
- playbackRate 倍速播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jQuery/1-jquery3.6.0.js"></script>
<script>
$(function(){
// 获取所有按钮
var button = $('button');
// 获取video
var video = $('video')[0];
console.log(video);
button.click(function(){
// 播放
if($(this).text()==='播放'){
video.play();
}
// 暂停
if($(this).text()==='暂停'){
video.pause();
}
// 切换paused 表示是否是暂停状态
if($(this).text()==='切换'){
if(video.paused){
video.play();
} else{
video.pause();
}
}
// 音量
if($(this).text()==='音量+'){
video.volume = (video.volume > 0.9 ? 0.9 : video.volume)+0.1;
}
if($(this).text()==='音量-'){
video.volume = (video.volume < 0.1 ? 0.1 : video.volume)-0.1;
}
// 快进
if($(this).text()==='快进'){
video.currentTime+=5;
}
//回退
if($(this).text()==='回退'){
video.currentTime-=5;
}
// 倍速播放
if($(this).text()==='倍速播放'){
video.playbackRate = 5;
}
})
video.onvolumechange = function(){
if(video.volume > 0.5){
alert('如果继续提高音量会损伤听力')
}
}
})
</script>
<style>
video{
width: 400px;
/* height: 600px; */
/* 一般不建议一起使用width height */
}
</style>
</head>
<body>
<video src="../音视频/1.mp4" controls loop muted poster="../images/g.jpeg"></video>
<button>播放</button>
<button>暂停</button>
<button>切换</button>
<button>音量+</button>
<button>音量-</button>
<button>快进</button>
<button>回退</button>
<button>倍速播放</button>
</body>
</html>
