当其他元素被点击时停止播放声音

Question

我无法处理可能很简单的问题。默认情况下，我有几个div与html5视频静音。被点击的声音开始播放，而第二次点击时它会被静音。但是，当声音打开，我点击另一个视频类的div它不会停止。如何在单击另一个视频时停止播放视频的声音？

<div class="v1"> 
    <video class="video" width="800" height="450" autoplay loop muted> 
    <source src="..." type="video/mp4"> 
    Your browser does not support the video tag. 
    </video> 
</div> 

<div class="v2"> 
    <video class="video" width="800" height="450" autoplay loop muted> 
    <source src="..." type="video/mp4"> 
    Your browser does not support the video tag. 
    </video> 
</div> 

<div class="v3"> 
    <video class="video" width="800" height="450" autoplay loop muted> 
    <source src="..." type="video/mp4"> 
    Your browser does not support the video tag. 
    </video> 
</div> 

$(".video").click(function() { 
    if (this.muted == true) { 
     this.muted = false; 
    } else { 
     this.muted = true; 
    } 
}); 

Answer 1

$(".video").click(function() { 
var currentVideo = this; 
    if (this.muted) { 
     this.muted = false; 
     // Loop through all video available 
     $(".video").each(function(e){ 
      if(this!=currentVideo){ // If not current div then mute all other 
       this.muted = true; 
      } 
     }); 
    } else { 
     this.muted = true; 
    } 
}); 

jsfiddle