Question

我想请你想象一下你面前桌子上的一本书。这本书已经关闭。现在，你伸出你的手，抓住书的封面，稍微打开书，然后在抓住封面之前将其保持原样。

这是我想为我的网站制作的动画。我想拍摄一个简短的视频 - 正如所描述的那样 - 在After Effects中编辑它（删除视频中的背景，以便只有图书可见），并以某种格式保存。

然后，我想在我的网站上添加视频/动画作为介绍，你可以点击进入网站，我想如果动画在鼠标上播放（书是打开的），那就太酷了鼠标出（本书即将结束）。或者我可以跳过“鼠标移出”部分，如果无法实现这种效果（反向动画？）。

我的问题是你将如何执行？我能想象到的最简单的方法是将动画保存为* webm，制作带视频背景的div，并在悬停时播放视频。动画，字面意思是“书”将不会被用作网站的背景，但它应该扮演位于网站中间的图像的角色，您可以单击该图像以打开其余内容。我只是觉得静止图像对我想要制作的网站来说还不够，所以我真的想要一个动画而不是一个图像。

动画非常简短：只需几秒钟就可以在鼠标悬停时打开本书（如果可能的话，在鼠标输出时关闭）。

你会如何执行这个想法？这是一个普遍的问题，但我想听听你的想法，然后我会谷歌如何自己执行具体的想法。我只是不知道如何绕过这个想法以达到最佳效果。

（我宁愿拍摄这本书的视频而不是制作flash动画等等，因为我有一本完美的角色书 - 这对于展示这本特别的书非常重要）

Answer 1

如果您想在鼠标悬停在视频上时播放视频，则应该收听mouseenter事件。当鼠标离开视频元素时，请侦听mouseout事件。

JavaScript中的一个解决方案是使用addEventListener创建事件侦听器。

var video = document.getElementsByTagName("video")[0];

video.addEventListener("mouseenter", function() {
    video.play();
}).addEventListener("mouseout", function() {
    video.pause();
});

这是一个jQuery解决方案

$("video").on("mouseenter", function() {
    $(this).play();
}).on("mouseout", function() {
    $(this).pause();
});

来源：http://www.w3schools.com/tags/ref_av_dom.asp

如何在鼠标输入/输出中播放/暂停视频？

1 个答案: