video使用
在video标签出现之前，如果想在网页中播放视频或者音频数据是非常困难的。H5中的video标签可以向使用img显示图片一样简单去播放视频。
video提供了很多属性和方法，我们可以通过直接设定或者通过js控制视频的显示
读写属性 src autoplay poster loop constrols width height 宽高一般不一起使用
constrols是控制条 loop是循环播放 autoplay是自动播放poster='' 封面 放封面地址 muted静音
方法 play播放 pause暂停 paused切换，是否是暂停状态 volume控制音量 currentTime当前播放秒数 playbackRate倍数播放
常用的一些属性
类似所有其他的视频元素也支持 HTML 元素.
-
autoplay布尔属性；声明该属性后视频会尽快自动播放，不会停止等待开始数据全部完成。
自动播放音频（或避免视频）可能会破坏用户体验，所以应该有责任。如果你要提供自动播放功能，你应该加入（让用户主动打开自动播放）。媒体元素，播放源由用户很常用在其设置，自动播放我们用。想了解如果自动使用自动播放，可查看正确的.
如果
autoplay="false"自动播放功能，会关闭使用视频的自动播放属性；只要<video>自动播放属性，要删除播放，需要完全删除该属性在某些浏览器中，如果没有设置
muted，自动播放属性将不会生效。 -
controls加上这个属性，浏览器会在用户视频底部提供一个控制面板，允许视频播放，包括重量，跨帧，暂停/播放。video该属性可以禁止浏览器中画时间中的画面或在某些情况下自动请求画中画模式。布尔属性，用于在使用和功能（HDMI、DVI等）无线技术（Miracast、Chrome、DLNA、AirPlay等）连接设备时，禁止远程播放。
-
height视频区域的高度
-
loop布尔属性；指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。
-
muted布尔属性，指定在中音频的默认设置。
-
playsinline布尔属性，视频将（inline）指定播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频将在全屏播放。
-
poster图片帧视频网址，用于显示该视频画面下载中的状态时显示。如果未指定属性，则视频在第一帧可用之前不会有，然后将第一帧海报作为海报（海报）来帧显示。
-
preload该用户输入的内容播放值最佳提示浏览器，作者认为在播放之前，加载什么会达到的体验。 可能是以下之一：
none: 表示不应该预加载视频。metadata: 表示刚刚获取视频的元数据（例如长度）。auto: 表示可以下载整个视频文件，即使用户不希望使用它。- 字符串: 和
auto一致是。
浏览器的默认值并不相同，即使规范建议设置为
metadata。注意：
autoplay属性的优先级preload比高低autopaly。- 没有规范浏览器遵循该属性的值，这只是去一个提示。
-
src要嵌到页面的视频的网址。任选；你也可以使用视频块内的元素来指定需要嵌到页面的视频。
-
width视频区域的内容丰富，单位是CSS
常用属性
1.属性
1.进度条controls
<video src="./音视频/1.mp4" controls> </video>
2.页面一加载是否自动播放autoplay
<video src="./音视频/1.mp4" controls autoplay> </video>
3.post封面
<video src="./音视频/1.mp4" poster='./img/1.jpg'> </video>
4.是否循环播放loop
<video src="./音视频/1.mp4" controls loop> </video>
5.muted静音
<video src="./音视频/1.mp4" controls loop autoplay> </video>
例子:
<!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="./1-jquery.3.6.0.js"></script>
<style>
video{
width: 400px;//宽高一般设置只设置一个，让它等比例分配；
}
</style>
</head>
<body>
<!-- loop循环播放 autoplay--自动播放 muted> poster封面-->
<video src="./音视频/1.mp4" controls loop ></video>
<div class="button">
<button>播放</button>
<button>暂停</button>
<button>切换</button>
<button>音量+</button>
<button>音量-</button>
<button>快进</button>
<button>回退</button>
<button>倍速的播放</button>
</div>
<script>
$(function(){
var button=$('.button');
console.log(button);
//获取video
var video=$('video')[0];
//button 点击之前做一些事情
button.on('click','button',function(){
//播放
if($(this).text()==='播放'){
video.play();
}
//暂停
else if($(this).text()==='暂停'){
video.pause();
}
//切换要做判断，当前状态是暂停就播放，播放就暂停
else if($(this).text()=='切换'){
if(video.paused){//注意单词别写错
video.play();
}else{
video.pause();
}
}
//做音量的加
else if($(this).text()==='音量+'){
console.log(video.volume);
video.volume=(video.volume>0.9?0.9:video.volume )+0.1
}
//做音量的减
else if($(this).text()==='音量-'){
console.log(video.volume);
video.volume=(video.volume<0.1?0.1: video.volume)-0.1;
}
// 快进
else if($(this).text()==='快进'){
video.currentTime+=5;
}
//回退
else if($(this).text()==='回退'){
video.currentTime-=5;
}
// 倍速的播放
else if($(this).text()==='倍速的播放'){
video.playbackRate=5;
}
})
video.onvolumechange=function(){
// console.log('音量改变事件监听')
if(this.volume===0.5){
alert('继续调高声音会损伤耳膜')
}
}
})
</script>
</body>
</html>
其他的使用注意事项：
- 如果你没有指定
controls属性，那么视频不会展示浏览器自带的控件，你也可以使用 JavaScript 和HTMLMediaElementAPI 来创建你自己的控件 HTMLMediaElement会激活许多不同的事件以便让你可以控制视频（和音频）内容。- 您可以使用 CSS 属性
object-position来调整视频在元素内部的位置，它可以控制视频尺寸适应元素外框的方式。 - 如果想在视频里展示字幕或者标题，你可以在
<track>元素和WebVTT格式的基础上使用JavaScript来实现。
更多的还是参考MDN
