JavaScript多个音频audio标签，点击其中一个播放时，其他的停止播放
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>一个页面中有多个音频audio标签，怎样在点击其中一个播放时，其他的停止播放</title>
</head> <body>
<audio src="http://www.ytmp3.cn/down/49366.mp3" controls></audio>
<audio src="http://www.ytmp3.cn/down/49382.mp3" controls></audio>
<audio src="http://www.ytmp3.cn/down/49369.mp3" controls></audio>
<script type="text/javascript">
// 获取所有audios
var audios = document.getElementsByTagName("audio");
// 暂停函数
function pauseAll() {
var self = this;
[].forEach.call(audios, function(i) {
// 将audios中其他的audio全部暂停
i !== self && i.pause();
})
}
// 给play事件绑定暂停函数
[].forEach.call(audios, function(i) {
i.addEventListener("play", pauseAll.bind(i));
})
</script>
</body> </html>
多个视频：
// 视频点击播放/暂停
var videoAll = $(".J_catVideo");
videoAll.on("click",function(){
var cindex = videoAll.index(this);
videoAll.each(function (i) {
var video = $(this).find('video')[0];
if (i == cindex) {
if (video.paused) {
$(this).find(".J_videoPic").hide();
video.play();
} else {
$(this).find(".J_videoPic").show();
video.pause();
}
}else{
if (!video.paused) {
$(this).find(".J_videoPic").show();
video.pause();
}
}
})
})
JavaScript多个音频audio标签，点击其中一个播放时，其他的停止播放的更多相关文章
- 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况
对比audio标签 和 Web Audio API 各平台浏览器的支持情况: audio element Web Audio API desktop browsers Chrome 14 Yes ...
- jquery怎么在点击li标签之后添加一个在class，点击下一个li时删除上一个class？
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class. 具体演示如下: 1.HT ...
- jquery点击li标签之后在该li标签上添加一个class，点击下一个li时删除上一个li的class
思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class 具体演示如下: 1.HTM ...
- 去除移动端 a标签 点击有一个 阴影效果
outline: none;appearance:none; -webkit-tap-highlight-color: transparent;
- 移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放
直接上代码js部分: <script type="text/javascript"> var go;//记录video播放器位置 var video=document. ...
- HTML5的Audio标签打造WEB音频播放器
目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...
- html5 的<audio> 音频 audio的“坑”
<audio>标签是html5的一个非常有意义的特性.告别的flash的时代.它的属性有: autoplay:音频就绪后马上播放 controls:出现该属性,向用户显示播放的控件. lo ...
- Html5视频播放器-VideoJS+Audio标签实现视频，音频及字幕同步播放
一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...
- 不常用但是又得有的一个标签——音频(audio)
这几天做一个项目里面出现了H5的一个标签,音频(audio),可以说这是我第一次遇见这种标签基本上很少用的,也许是我做的项目少吧, 下面我来说一下我的思路,当然这是我自己想的,当时我想到的是如何让一个 ...
随机推荐
- MobaXterm 错行，乱码
最近使用MobaXterm ssh,发现进入ssh显示中文没问题.但如果用VIM编辑文件时如果有中文,修改插入操作有时就会有串行乱码情况,改vim编码也不行.都没有完美解决.最后发现只需要在MobaX ...
- 机器学习算法中GBDT和XGBOOST的区别有哪些
首先xgboost是Gradient Boosting的一种高效系统实现,并不是一种单一算法.xgboost里面的基学习器除了用tree(gbtree),也可用线性分类器(gblinear).而GBD ...
- python初步要点
[python初步要点] #! 用于告诉操作系统去哪里找Python解释器为运行您的程序. 1.print 的输出有以下2种形式,""%()的形式类似于C的printf. 要注意逗 ...
- Information Retrieval II
[Information Retrieval II] 搜索引擎分类: 1.目录式搜索引擎. 2.全文搜索引擎. 3.元搜索引擎(Meta-Search Engine). 搜索引擎的4个阶段:下载(cr ...
- How To Use Google Flags
［How To Use Google Flags］ 1.Commandline flags are flags that users specify on the command line when ...
- Rigidbody中 Angular Drag （角阻力）：
Rigidbody中 Angular Drag (角阻力):同样指的是空气阻力,只不过是用来阻碍物体旋转的.如果设置成无限的话,物体会立即停止旋转.如果设置成0,物体在上升过程中,会发生侧翻旋转. ...
- 安装系统重启的时候出现了error:file '/boot/grub/i386-pc/normal.mod' not found
1.直接进入系统的时候只出现grub rescue的命令行 可以使用的命令有set和 ls 在用ls命令查看 磁盘的分区情况其中hd0 代表第一块硬盘 hd1代表第二块 使用ls 来查看存在那些系统, ...
- Java程序设计——对象序列化
对象序列化的目标是将对象保存到磁盘中或允许在网络中直接传输对象,对象序列化机制允许把内存中的Java对象转换成平台无关的二进制流,从而允许把这种二进制流持久保存在磁盘上,通过网络将这种二进制流传输到另 ...
- ImageView.src的png图标变形问题
图标,必须是png-24输出,如果是png-8输出,则失真.
- MyEclipse文件查找技巧
只为成功找方法,不为失败找借口! MyEclipse使用总结——MyEclipse文件查找技巧 一.查找文件 使用快捷键[ctrl+shift+R]弹出弹出文件查找框,如下图所示: 二.查找包含某个字 ...