Question

我希望我的第二帧（.frame2）淡出mouseover上的另一个视频，然后淡出mouseout上的默认视频，但我似乎无法添加转换持续时间，使它看起来不错。我希望第一个视频淡出并且第二个视频已经存在，所以没有显示背景，所以框架总是保持与正在看的人相同的大小。

编辑：我刚尝试了CSS方式，将另一个视频元素放在.frame2的顶部，并将其设为display: none;或opacity: 0;并将其设为display: block;或{ {1}}悬停在opacity: 1;上，但它无效。由于某种原因，它不会在其下面呈现视频元素。

Codepen

.frame2

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

如何在转换时悬停在2个视频之间切换

2 个答案: