Question

我写了一些PHP代码将视频加载到照片中的mouseenter上，但是我想使视频的src保持未知，并且仅加载到mouseenter上，以便使页面变浅。

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

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

Answer 1

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

将鼠标悬停在图像上时，我使用.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">

Answer 2

PHP是一种服务器端语言，因此它不会像mouseenter这样的客户端交互作用。在将页面放入浏览器之前，已经对PHP进行了处理。因此，这将是JavaScript（或您愿意的话，是jQuery）的领域。

使用原始JavaScript的示例。您可以在脚本块中回显与html相同的内容。

#vid_container{
width:300px;
min-height:150px;

background:#333;
}
video{
opacity:0;
}

<div id='vid_container'><!-- so we don't show the broken video add a container -->
  <video id='vid' controls src="" width="300"></video>
</div>
<script>
  var videoURL = "<?php echo the_field('video_url'); ?>";//IDK what the_field does, but point being this is where you would put the video url
  videoURL = "https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4";//so the demo will work. remove this line
  var vidContainer = document.getElementById('vid_container');
  vidContainer.addEventListener('mouseenter', function fireOnce(){
    var vid = vidContainer.children[0];
    vid.style.opacity = 1;
    vid.src = videoURL;
    vidContainer.removeEventListener('mouseenter', fireOnce);//this is provided you don't want to change the video multiple times (for every mouseenter event
  });
</script>

在mouseenter上加载视频

2 个答案: