當其他元素被點擊時停止播放聲音

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