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

-4

我想请你想象一下你面前的书桌上有一本书。该书已关闭。现在，你伸出你的手，抓住书的封面，稍微打开书，然后关闭，就像在你抓住封面之前一样。如何在鼠标输入/输出中播放/暂停视频？

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

然后，我想在我的网站上添加视频/动画作为介绍，您可以点击进入网站，我想如果鼠标悬停播放动画（本书正在打开）在鼠标外面（书正在关闭）。或者如果不可能实现这种效果（反向动画？），我可以跳过“鼠标移出”部分。

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

动画将会非常短暂：只需几秒钟就可以在鼠标上打开该书（并在可能的情况下关闭鼠标）。

你会如何执行这个想法？这是一个普遍的问题，但我想听听你的想法，然后我会自己google怎么执行特定的想法。我只是不知道如何绕过这个想法来达到最佳效果。

（我宁愿拍书比作一个flash动画等，因为我对角色的完美的书的视频 - 这是真的显著显示此特定的书）如果你要玩

来源

2015-10-19 user3390083

对于CSS看看[这里]（http://stackoverflow.com/questions/控制动画的播放状态32825156 /转换暂停的动画播放状态到磨合上点击的-A-LINK/32825335＃32825335）。对于这个问题，尝试自由职业者。这个过于宽泛。 – Harry

*这是一个普遍的问题，但我想听听你的想法，然后我会google如何自己执行特定的想法。* - Stack Overflow作为问答网站，并不意味着这些类型的问题，只是投票的想法。请参阅[我应避免询问哪些类型的问题？]（http://stackoverflow.com/help/dont-ask） – BSMP

当鼠标悬停在视频上时的视频，您应该听取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

来源

2015-10-19 15:20:08

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

回答

相关问题