<!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标签,点击其中一个播放时,其他的停止播放的更多相关文章

  1. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  2. jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?

    思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class. 具体演示如下: 1.HT ...

  3. jquery点击li标签之后在该li标签上添加一个class,点击下一个li时删除上一个li的class

    思路:点击当前li元素后是用removeClass()删除所有兄弟元素(使用siblings()获取)的class样式,然后使用addClass()为当前li添加class 具体演示如下: 1.HTM ...

  4. 去除移动端 a标签 点击有一个 阴影效果

    outline: none;appearance:none;  -webkit-tap-highlight-color: transparent;   

  5. 移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放

    直接上代码js部分: <script type="text/javascript"> var go;//记录video播放器位置 var video=document. ...

  6. HTML5的Audio标签打造WEB音频播放器

    目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...

  7. html5 的<audio> 音频 audio的“坑”

    <audio>标签是html5的一个非常有意义的特性.告别的flash的时代.它的属性有: autoplay:音频就绪后马上播放 controls:出现该属性,向用户显示播放的控件. lo ...

  8. Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放

    一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...

  9. 不常用但是又得有的一个标签——音频(audio)

    这几天做一个项目里面出现了H5的一个标签,音频(audio),可以说这是我第一次遇见这种标签基本上很少用的,也许是我做的项目少吧, 下面我来说一下我的思路,当然这是我自己想的,当时我想到的是如何让一个 ...

随机推荐

  1. Remove “Quick Access” entry in Eclipse Juno

    Here is a quick hack which doesn't require any plugin installation, instead you just need to add a f ...

  2. mac使用备注

    快捷键: 掌握好多手势和快捷键可以有效的提高工作效率,触控板和快捷键基本让你可以脱离鼠标. Command+Tab                   任意情况下切换应用程序 - 向前循环 Shift ...

  3. java JDBC数据库连接操作

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; public clas ...

  4. 关于SQLServer2000中触发器的使用——多行数据提交

    关于触发器的使用,有很多争议.触发器的好处不言而喻是增强了数据的校验能力,能够有效地实现复杂的业务逻辑.在一定程度上走的比约束和check走的更远.关于触发器的坏处,最典型的就是触发器的使用会导致系统 ...

  5. du熊的机器人

    [du熊的机器人] Description du熊正在玩一个别人刚送给它的机器人.这个机器人只能在一个棋盘中行走,棋盘的左上角格子为(0, 0),右下角格子为(X, Y). du熊控制这个机器人从棋盘 ...

  6. android应用程序monkey压力测试(模拟器或真机)

    首先需要安装一个模拟器: 前置条件: 1.jdk环境配置 2.eclipse下载安装(直接解压即可) 3.网站上下载ADT: 由于国内禁止google的浏览,所以需要自己上网找资源,下面这个网站有比较 ...

  7. ios 获取当前wifi名称

    ios5之前可以通过读取配置文件获取,ios5以后苹果修改wifi列表文件位置,只有root权限才可以读取. ios4:/System/Library/SystemConfiguration/WiFi ...

  8. Docker使用link建立容器之间的连接

    我们在使用Docker的时候,经常可能需要连接到其他的容器,比如:web服务需要连接数据库.按照往常的做法,需要先启动数据库的容器,映射出端口来,然后配置好客户端的容器,再去访问.其实针对这种场景,D ...

  9. Putty建立隧道的方法[z]

    通过上节我们了解了SSH隧道的优点,但是无论是现实中还是网络中,隧道都是有入口和出口的,本节就以Putty隧道为例,详细介绍Putty建立隧道的方法. 模拟案例一: 端口,出口为2012端口,隧道建立 ...

  10. Golang之fmt格式“占位符”

    golang的fmt包实现了格式化I/O函数: package main import "fmt" type Human struct { Name string } func m ...