【问题标题】:Play a video when entering hover, then a gif while still on hover, and then another video when leaving hover进入悬停时播放视频,然后在悬停时播放 gif,然后在离开悬停时播放另一个视频
【发布时间】:2020-07-22 08:13:46
【问题描述】:

我将在屏幕中间有一个按钮。 当用户将鼠标悬停在它上面时,视频将开始在后台播放。视频结束后,只要用户仍将鼠标悬停在按钮上,gif 就会立即开始播放并继续播放。最后,当用户离开悬停时 - 将播放另一个视频。 TLDR:

  • 悬停按钮
  • 视频播放
  • 视频结束
  • gif 播放(一直到下一步)
  • 按钮未悬停
  • 另一个视频播放
  • 视频结束

我想对我的老师们赞不绝口,并希望得到一些帮助:D 有问题的视频和 GIF: https://imgur.com/a/ZYVACWg

再次感谢!

编辑:我希望这没有出错,我正在寻找提示 - 不是让某人自己编写所有这些代码。也许是一个功能,或者是一条建议;可以编写代码的东西。

【问题讨论】:

  • 我有一个建好的网站,我想把它添加到它的一个部分。也只是在寻找提示,而不是真正要求任何人自己编写所有代码......

标签: javascript html css video gif


【解决方案1】:

一些提示...

假设您已经精通 HTML 和 Javascript,

我会使用 <video> 标签嵌入您的视频,<img> 标签用于 gif。 使用 onmouseover 和 onmouseout 事件来跟踪鼠标移动并在需要时更改按钮的 innerHTML 内容!

这样的东西应该可以工作!

【讨论】:

  • 我对 JS 有点陌生,但我还是会尝试!如果可以,我会编辑帖子。
  • 首先让一些东西工作,只是为了改变按钮的内容,使用文本,先让鼠标控制工作,然后考虑添加视频内容。如果您对其中的一部分感到困惑,您可以提出更具体的问题并向人们展示您的代码。
  • 我用文字尝试过:jsfiddle.net/w5ouxcpn 我认为挑战将是控制视频和 gif,因为我以前从未做过类似的事情。
  • 好的开始!这是超时的有趣之处,看看如果你将鼠标快速移入、移出和再次移入会发生什么! :)
  • 这很疯狂 xD 我希望它不会发生在 gif 上。我现在用 innerHTML 试试 :)
猜你喜欢
  • 2018-11-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-11
  • 2018-10-01
  • 2023-04-05
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多