单击另一个视频时停止视频

我在同一页面上有两个本地托管的视频。我试图在单击另一个时停止一个，但它不起作用。

<div>
    <div>
    <div>
    <div></div>

    <div></div>
    <video preload="" playsinline="" autoplay="" muted="" loop=""> <source src="https://www.exampledomain/video1.mp4" type="video/mp4"></video> </div>
    <div>
    <div></div>            
    <div>
    <div>
    <div>
    <a href="/offers/" target="_self">
    <span>View Video</span> </a>
    <a href="/offers/" target="_self">
    <span>Offers</span></a>

    <div><a href="https://www.exampledomain/video2.mp4"><i></i></a></div>
        
        <p>Click to view full video</p>
        
                      </div>
                   </div>

我试过听在线课程，但没有奏效：

<script>
        $(".video-bg fill visible").on("click", function() {
    
        // All but not this one - pause
        $(".video-bg fill visible").not( this ).each(function() {
             this.pause();
        });
    
        // Play this one
        // this.play();
    
        // Or rather toggle play / pause
        this[this.paused ? "play" : "pause"]();
    
    });
</script>