时间戳

首页 > 解决方案 > 在 mouseenter 上加载视频

javascript - 在 mouseenter 上加载视频

问题描述

我编写了一些 PHP 代码来mouseenter在照片中加载视频，但我想让src视频的 保持未知并仅加载mouseenter，以使页面更轻。

很多其他网站都这样做，但我不知道他们是否使用 jQuery。

<video src="<?php the_field("video_url"); ?>"></video>

标签： javascriptjqueryhtml

解决方案

我仍然不确定您要达到的目标。

将鼠标悬停在图像上时，我使用.replaceWith()方法将图像替换为具有当前标记的视频

  • <video src='https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4' autoplay></video>

注意autoplay里面，这将立即播放视频。

这是我所做的：

$('img').mouseenter(function(e) {
  $(this).replaceWith("<video src='https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4' autoplay></video>");
});
img {
  height: 300px;
  width: auto;
  border: 1px solid;
}

video {
  height: 300px;
  width: 300px;
  border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg" alt="Big Buck Bunny">

推荐阅读