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

单击其他元素时停止播放声音

1 个答案: