网页中的视频和音频是两个很相像的标签元素,使用js对他们的控制和处理也是非常得相似。
使用js控制这两个标签元素,几乎可以使用同样的函数和事件,但是为了清晰,下面还是给出了两者的详细方法
如此,也方便查阅学习。
一、使用js控制网页中的音频
1.在页面中引入<audio>标签
- 如果对<audio>标签不熟悉的话,点击进行 W3school网站 进行学习。
<audio src="1.mp3" id="my-bgm" controls autoplay="autoplay" loop="loop"></audio>
当我们使用Chrome测试以上代码的时候,发现虽然我们给 <audio> 标签添加了
autoplay="autoplay"
属性,但是音频还是不自动播放。这不是我们代码的问题,而是Chrome的问题。解决办法:在Chrome浏览器地址栏输入
chrome://flags/#autoplay-policy
,然后将第一个选项 Autoplay policy 设置为 no user gesture is required 即可。
![img_123e2ee35f91dba4f85e4b886c9ddb93.png](https://yqfile.alicdn.com/img_123e2ee35f91dba4f85e4b886c9ddb93.png?x-oss-process=image/resize,w_1400/format,webp)
2.判断网页中的音频是否暂停
- 使用如下代码,我们判断网页中的音频是否暂停。注意这里是使用paused,千万不要漏掉了 d 。
var bgm=document.getElementById('my-bgm');
// 如果音频是暂停,返回true
if(bgm.paused){
console.log("音频现在是暂停状态");
}
3.使用js控制音频播放
- 使用以下代码,控制网页中的音频播放。
var bgm=document.getElementById('my-bgm');
bgm.play();
4.使用js控制音频暂停
- 使用以下代码,控制网页中的音频暂停。
var bgm=document.getElementById('my-bgm');
bgm.pause();
5.判断网页中的音频是否静音
var bgm=document.getElementById('my-bgm');
// 如果音频是静音,返回true
if(bgm.muted){
console.log("音频现在是静音状态");
}
6.使用js控制音频的静音
var bgm = document.getElementById('my-bgm');
bgm.muted = true; // 使音频静音
bgm.muted = false; // 取消音频静音
7.音频的 onended() 事件
详细学习onended 事件,点击进入 菜鸟教程- onended 事件
使用 onended() 事件,我们可以控制音频在播放完毕之后的动作。
但是,如果<audio> 标签带有
loop="loop"
属性,这个事件是不能执行的。
var bgm = document.getElementById('my-bgm');
bgm.onended=function(){
alert("音频播放完毕,可以继续后面的动作!");
}
// 或者这样子写
var bgm = document.getElementById('my-bgm');
bgm.addEventListener('ended',function(){
alert("音频播放完毕,可以继续后面的动作!");
});
二、使用js控制网页中的视频
1.在页面中引入<video>标签
<video src="1.mp4" id="my-video" controls autoplay="autoplay"></video>
如果对<video>标签不熟悉的话,点击进行 W3school网站 进行学习。
当我们使用
<video>
标签正确引入视频,但是在网页上只能听到声音,不能看到画面,不是因为我们代码的错误,是因为视频的问题。是因为视频格式的问题,或者是因为我们的音频太短了,换一个视频试一试,但是如果是在移动端观看的时候,是没有这个问题的。
2.判断网页中视频是否暂停
var my_video = document.getElementById("my-video");
// 如果视频是暂停的,返回true
// 如果视频是播放的,返回false
console.log(my_video.paused);
3.使用js控制视频播放
var my_video = document.getElementById("my-video");
my_video.play();
4.使用js控制视频暂停
var my_video = document.getElementById("my-video");
my_video.pause();
5.判断网页中的视频是否静音
var my_video = document.getElementById("my-video");
// 如果视频是静音状态,返回true;否则返回true
console.log(my_video.muted);
6.使用js控制视频的静音
var my_video = document.getElementById("my-video");
my_video.muted = true; // 使视频静音
my_video.muted = false; // 取消视频静音
7.视频的 onended() 事件
详细学习onended 事件,点击进入 菜鸟教程- onended 事件
使用 onended() 事件,我们可以控制视频在播放完毕之后的动作。
但是,如果<video> 标签带有
loop="loop"
属性,这个事件是不能执行的。
var my_video = document.getElementById("my-video");
my_video.onended=function(){
alert("视频播放完毕,可以继续后面的动作!");
}
// 或者这样子写
var my_video = document.getElementById("my-video");
my_video.addEventListener('ended',function(){
alert("视频播放完毕,可以继续后面的动作!");
});