如何在带有过渡的悬停时在 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

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

Answer 2

试试这个

.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);
});