Javascript 如何将鼠标悬停在图像上，视频开始在图像区域内静音播放

[！[Enter Image Description Here][1]][1]我正在使用WordPress和Elementor，我想要的效果是，当用户悬停在图像上时，视频开始在图像区域内静音播放，当鼠标悬停在图像上时，视频停止播放，当我们点击图像时，视频可以全屏播放.如何用Java编写代码？我试着问Chat GPT，但它不起作用:

<script>
var myVideo = document.getElementById("myVideo");
var myImage = document.getElementById("hoverimage");
var container = document.querySelector(".image-video-container");

container.addEventListener("mouseover", function() {
  myVideo.play();
});

container.addEventListener("mouseout", function() {
  myVideo.pause();
});
</script>

但上面的编码不起作用

在@피케和@Madan Bhandari的帮助下，我做到了.代码如下:

<div id="image-video-container" style="

position: relative;

height: 300px;

width: 400px;

overflow: hidden;

">

<img

id="hoverimage"

style="

position: relative;

height: 300px;

width: 400px;

overflow: hidden;

"

src="https://www.deliverystone.com/wp-content/uploads/2023/03/IMG_20230222_145146_1.jpg"

/>

<video style="

position: relative;

display: none;

object-fit: cover;

height: 100%;

width: 100%;

"

id="myVideo" loop="" muted="">

<source

src="https://www.deliverystone.com/wp-content/uploads/2022/11/Aloha-Heja-He-BGM.mp4"

type="video/mp4"

/>

</video>

</div>

<script>

var myVideo = document.getElementById("myVideo");

var myImage = document.getElementById("hoverimage");

var container = document.getElementById("image-video-container");

container.addEventListener("click", (event) => {

if (container.requestFullscreen){ container.requestFullscreen();

myVideo.muted = false;}

else if (container.webkitRequestFullscreen){

container.webkitRequestFullscreen();

myVideo.muted = false;}

else if (container.msRequestFullScreen){ container.msRequestFullScreen();

myVideo.muted = false; }

});

container.addEventListener("mouseover", function () {

if (!document.fullscreenElement) {

myVideo.muted = true;

}

myImage.style.display = "none";

myVideo.style.display = "block";

myVideo.currentTime = 0;

myVideo.play();

});

container.addEventListener("mouseout", function () {

myVideo.pause();

myImage.style.display = "block";

myVideo.style.display = "none";

});

</script>