juqery控制下的多个视频，实现有且只能播放一个的效果

嗨，这次主要写一点基础的还是关于video的，实际中遇到的大坑。

就上次写了修改视频播放的样式的基础上，又控制了一次只能播放一个视频，避免出现多个视频同时，或者是播放先后重叠出现的音频混杂的情况，所以继续跟帖了这篇博客。

paly()方法和pause()方法 是HTML5里新增的 audio和video里的方法，在jquery中，选择器的使用，操作的是DOM对象，而针对于jquery是没有play()方法，需要转换成 $(“video”)[0].play()来使用。

效果图如下（这里只是使用了两个视频，作为对比参照，具体效果，可以根据以下代码实现）：

还是直接上代码比较实际：
css

<style>
.all{
position: relative;
left:0;
top:0;
width:840px;
}
.all video{
float:left;
margin-left:100px;
}
.video-start{
position: absolute;
left:50px;
top:0;
}
.video-stop{
position: absolute;
left:50px;
top:0;
}
</style>

****html:****

<div class="all">
<video width="320" height="240" src="two.mp4" loop poster="img/timg.jpg" controls class="video1"></video>
<video width="320" height="240" src="two.mp4" loop poster="img/timg.jpg" controls class="video2"></video>
</div>

javascript

<script>
$(document).ready(function(){
$(".video1").click(function(){
$(".video2")[0].pause()
if($(".video1").paused){
$(".video1")[0].play()
}else{
$(".video1")[0].pause()
}
})
$(".video2").click(function () {
$(".video1")[0].pause()
if ($(".video2").paused) {
$(".video2")[0].play()
} else {
$(".video2")[0].pause()
}
})
})
</script>

接下来就是继续的优化，希望能帮到有需要的人，我去查看其他大佬的原创去了，回头见咯~~~

• 点赞
• 收藏
• 分享
• 文章举报