jquery - 如何在悬停时通过过渡在 2 个视频之间切换

Question

我希望我的第二帧 (.frame2) 在鼠标悬停时淡入另一个视频，并在鼠标移开时淡入默认视频，但我似乎无法添加过渡持续时间并使其看起来不错。我希望第一个视频淡出并让第二个视频已经存在，因此不显示背景，因此框架始终与观看它的人保持相同的大小。

编辑:我只是尝试了 CSS 方式，将另一个视频元素放在 .frame2 之上，并使其成为 display: none; 或 opacity: 0; 并将其设置为 display: block; 或 opacity: 1; 悬停在 .frame2 上，但它没有工作。由于某种原因，它不会渲染其下方的视频元素。

Codepen

var video1 = 'https://ak9.picdn.net/shutterstock/videos/30858529/preview/stock-footage-cinemagraph-seamless-loop-little-boy-wearing-helmet-and-styrofoam-wings-standing-on-a-skateboard.mp4';
var video2 = 'https://ak2.picdn.net/shutterstock/videos/30860722/preview/stock-footage-cinemagraph-seamless-loop-little-boy-wearing-helmet-and-styrofoam-wings-standing-on-a-skateboard.mp4';

$('.frame2').mouseover(function(){
    $(this).attr('src', video2);
});

$('.frame2').mouseout(function(){
    $(this).attr('src', video1);
});

Answer 1

为什么不使用两个视频元素而不是更改 src？将它们堆叠在一起。悬停时淡出最顶部。

$('.frame_hover').hover(function() {
  $('.frame2_2').fadeOut(500);
}, function() {
  $('.frame2_2').fadeIn(500);
});

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #333437;
}

.main {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.frame-container {
  filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.75));
}

.frame1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50.5%) translateY(-49%);
  clip-path: polygon(19% 52%, 40% 52%, 40% 90%, 19% 90%);
}

.frame2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  clip-path: polygon(38% 0, 68% 0, 68% 100%, 38% 100%);
}

.frame3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-51%);
  clip-path: polygon(66% 9%, 88% 9%, 88% 82%, 66% 82%);
}

.frame4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-47%) translateY(-48%);
  clip-path: polygon(86% 0, 100% 0, 100% 29%, 86% 29%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
  <div class="frame-container">
    <video class="frame1" src="https://ak9.picdn.net/shutterstock/videos/30858529/preview/stock-footage-cinemagraph-seamless-loop-little-boy-wearing-helmet-and-styrofoam-wings-standing-on-a-skateboard.mp4" type="video/mp4" autoplay="true" loop="true"></video>
  </div>

  <div class="frame-container">
    <video class="frame4" src="https://ak9.picdn.net/shutterstock/videos/30858529/preview/stock-footage-cinemagraph-seamless-loop-little-boy-wearing-helmet-and-styrofoam-wings-standing-on-a-skateboard.mp4" type="video/mp4" autoplay="true" loop="true"></video>
  </div>

  <div class="frame-container frame_hover">
    <video class="frame2 frame2_1" src="https://ak2.picdn.net/shutterstock/videos/30860722/preview/stock-footage-cinemagraph-seamless-loop-little-boy-wearing-helmet-and-styrofoam-wings-standing-on-a-skateboard.mp4" type="video/mp4" autoplay="true" loop="true"></video>
    <video class="frame2 frame2_2" src="https://ak9.picdn.net/shutterstock/videos/30858529/preview/stock-footage-cinemagraph-seamless-loop-little-boy-wearing-helmet-and-styrofoam-wings-standing-on-a-skateboard.mp4" type="video/mp4" autoplay="true" loop="true"></video>
  </div>

  <div class="frame-container">
    <video class="frame3" src="https://ak9.picdn.net/shutterstock/videos/30858529/preview/stock-footage-cinemagraph-seamless-loop-little-boy-wearing-helmet-and-styrofoam-wings-standing-on-a-skateboard.mp4" type="video/mp4" autoplay="true" loop="true"></video>
  </div>
</div>

<video>标签应以 </video> 结束而不是/> .