杂乱无章Onmouseout帮助 - 无法连续执行此操作

发布于 2025-01-24 12:12:54 字数 472 浏览 4 评论 0原文

这是我的代码，我正在尝试进行，因此当我悬停在图像上时，它会播放视频，当您悬停时，它会停止视频并返回原始图像。问题是当我徘徊时，我将无法再次重新播放视频。我想知道如何做到这一点，以便我可以不止一次地悬停在图像上播放视频。我的编码如下：

<div class="thumb">
  <video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()" onmouseout="this.src='assets/img/product/mac-flower.png';">
    <source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
  </video>
</div>

原文

This is my code, I am trying to make so when I hover over the image it plays a video, and when you hover off it stops the video and goes back to the original image. The issue is when I hover off I am not able to rehover again to play the video again. I was wondering how I can do this so that I can hover over the image more than once to play the video. My coding is below:

<div class="thumb">
  <video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()" onmouseout="this.src='assets/img/product/mac-flower.png';">
    <source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
  </video>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

呆橘 2025-01-31 12:12:54

您可以尝试重新加载视频onmouseout活动，以便视频再次显示海报并重播。

新代码：

<div class="thumb">
  <video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()"onmouseout="this.load()">
    <source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
  </video>
</div>

You can try to reload video onmouseout event, so that video shows poster again and replays onmouseover.

New Code:

<div class="thumb">
  <video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()"onmouseout="this.load()">
    <source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
  </video>
</div>

回复收藏 0 原文

不醒的梦 2025-01-31 12:12:54

请这样加载海报以下内容：

<div class="thumb">
      <video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()" onmouseout="this.load()">
        <source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
      </video>
    </div>

Please load poster onmouseout like this:

<div class="thumb">
      <video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()" onmouseout="this.load()">
        <source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
      </video>
    </div>

回复收藏 0 原文

~没有更多了~