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

Question

我希望我的第二帧 (.frame2) 在 mouseover 上淡入另一个视频并在 mouseout 上淡入默认视频，但我似乎做不到添加过渡持续时间并使其看起来不错。我希望第一个视频淡出而第二个视频已经存在，因此不显示背景，因此框架始终与观看者保持相同大小。

编辑：我刚刚尝试了 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

试试这个

.video-fade-in {
  animation : fade-in .5s ease-in forwards;
}

.video-fade-out {
  animation : fade-out .5s ease-in forwards;
}

@keyframes fade-in {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@keyframes fade-out {
    from {
        opacity:1;
    }
    50% {
        opacity:0.5;
    }
    100% {
      opacity : 1;
    }
}

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').mouseenter(function(){
   $(this).removeClass('video-fade-out').addClass('video-fade-in').attr('src', video2);
}).mouseleave(function(){
   $(this).removeClass('video-fade-in').addClass('video-fade-out').attr('src', video1);
});

Answer 2

为什么不使用两个视频元素而不是更改 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> 结束，而不是 />。

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

How to switch between 2 videos on hover with transition

html

css

jquery

transition