H5新增video标签的常用属性
程序员文章站
2022-05-11 13:26:55
...
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倍数播放
常用属性
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>