悬停时的图像播放视频并在完成时使用图像重置 div
Posted
技术标签:
【中文标题】悬停时的图像播放视频并在完成时使用图像重置 div【英文标题】：Image On Hover Play Video And Reset the div with image on completion 【发布时间】：2022-01-11 06:48:51 【问题描述】：我想在加载和悬停或触摸时显示视频的缩略图我想在图像的父 div 内播放视频。在 mouseout 和视频结束时，div 应该自动显示图像。我该怎么做？
简单来说，我需要一个主页，就像 youtube 页面一样。我将首先显示图像，悬停时它应该播放或暂停相应的视频。
【问题讨论】：
【参考方案1】：你能试试这个：
var vid = document.getElementById("myVideo");
var text = document.getElementById("text");
function playVid()
vid.play();
text.innerhtml = "Start Video";
function pauseVid()
vid.pause();
text.innerHTML = "Stop Video";
<!DOCTYPE html>
<html>
<body>
<video muted="muted" id="myVideo" onmouseenter="playVid()" onmouseleave="pauseVid()">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
<p id="text"></p>
</body>
</html>【讨论】：
你能在你的电脑上试试这个代码吗... 感谢您的回答。但是，这不是我想要的。我需要在 mouseleave 的视频位置显示图像。以上是关于悬停时的图像播放视频并在完成时使用图像重置 div的主要内容，如果未能解决你的问题，请参考以下文章