WordPress+Elementor图片悬停静音播视频及点击全屏的JS实现

需求说明：

• 鼠标悬停图片时，图片隐藏，视频在原区域静音播放
• 鼠标移出区域时，视频暂停并隐藏，恢复显示图片
• 点击区域可全屏播放视频，同时取消静音

最初无效代码 #

通过ChatGPT生成的代码无法实现预期效果，代码如下：

<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>

可用完整代码 #

在他人协助下，完成了包含HTML结构和交互逻辑的完整可用代码，替换占位符后即可在Elementor中使用：

<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="[你的封面图片URL]"
/>

<video style="
position: relative;
display: none;
object-fit: cover;
height: 100%;
width: 100%;
"
id="myVideo" loop="" muted="">
<source
src="[你的视频文件URL]"
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>

内容的提问来源于stack exchange，提问作者Leonard Liu