网页中的视频和音频是两个很相像的标签元素，使用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 即可。
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("视频播放完毕，可以继续后面的动作！");
});
