网页中的视频和音频是两个很相像的标签元素，使用js对他们的控制和处理也是非常得相似。
使用js控制这两个标签元素，几乎可以使用同样的函数和事件，但是为了清晰，下面还是给出了两者的详细方法
如此，也方便查阅学习。

一、使用js控制网页中的音频

1.在页面中引入<audio>标签

<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 即可。




jquery播放声音 js 播放声音_jquery播放声音


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("视频播放完毕，可以继续后面的动作！");
});