Javascript 使用不同的div在hover上播放视频

我正在尝试，但当我将鼠标悬停在div

exbox1

上时，它无法播放视频。这个div不是video div的子级或父级，因为将它放在其中会破坏我的脚本。这就是我现在拥有的-

HTML

CSS

你能试试这个吗

<video class="vBGex2" src="vBackGround2.mp4" onmouseover="play(this)" onmouseout="stop(this)"></video>

function play(el){
   el.play();
}

function stop(el){
   el.pause();
}

功能播放（el）{
el.play（）；
}
功能停止（el）{
el.暂停（）；
}

否，当我将鼠标悬停在屏幕上时，视频本身会播放并暂停。我试图添加一个单独的、独立的div，当您将鼠标悬停在video div上时，它可以在video div中播放视频。

$(document).ready(function() {
  $(".vBGex2").on("mouseover", function(event) {
    this.play();

  }).on('mouseout', function(event) {
    this.pause();

  });
})

.vBGex2{
  position: absolute;
    z-index: -1;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  min-width: 100%; 
  min-height: 50%; 
    width: 230px;
    height: 300px;
    object-fit: cover;
  position: absolute;
  top: 50%;
  left: 0%;
}

<video class="vBGex2" src="vBackGround2.mp4" onmouseover="play(this)" onmouseout="stop(this)"></video>

function play(el){
   el.play();
}

function stop(el){
   el.pause();
}