[特效音画] 七夕 --- 视频融合试验 转自夕阳黄昏的作品（有代码）

admin

https://www.huachaowang.com/forum.php?mod=viewthread&tid=95630&pid=2669619&page=1&extra=#pid2669619 鼠标移入画面换视频

admin

素材是视频文件

admin

  转帖地址：  https://www.huachaowang.com/forum.php?mod=viewthread&tid=95630&pid=2669619&page=1&extra=#pid2669619

admin

鼠标移入画面换视频
<style>
  :root {
    --w: 1152px;
    --h: 648px;
  }

  #pMaskTest {
    margin: auto;
    width: var(--w);
    height: var(--h);
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    box-shadow: 4px 4px 10px black;
  }

  #pMaskV {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 15%;
    object-fit: cover;
    mask: url(#tMask);
    z-index: 20;
  }

  #vid0 {
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    mask: url(#sMask);
  }
</style>
<div id="pMaskTest">
  <video id="pMaskV" src="https://img2.tukuppt.com/video_show/15653652/01/31/20/62d4eb21736e0.mp4" autoplay loop muted></video>
  <video id="vid0" src="https://img2.tukuppt.com/video_show/2422006/00/02/12/5b51b06fd5101.mp4" autoplay loop muted></video>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=396860.mp3" autoplay loop></audio>
<svg>
  <defs>
    <radialGradient id="gradient" cx="20%" cy="50%" r="100%">
      <stop offset="0%" stop-color="hsl(60, 80%, 55%)" />
      <stop offset="100%" stop-color="hsl(0, 0, 100%)" />
    </radialGradient>
    <mask id="sMask">
      <rect x="0" y="0" fill="url(#gradient)" />
    </mask>
    <linearGradient id="Gradient0">
      <stop offset="0" stop-color="transparent" />
      <stop offset=".5" stop-color="white" />
    </linearGradient>
    <mask id="tMask">
      <rect x="0" y="0" fill="url(#Gradient0)" />
    </mask>
  </defs>
</svg>
<script>
  let rect = sMask.querySelector('rect');
  let hVal = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--h'));
  let wVal = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--w'));
  rect.setAttribute('width', wVal);
  rect.setAttribute('height', hVal);
  rect = tMask.querySelector('rect');
  rect.setAttribute('width', wVal);
  rect.setAttribute('height', hVal);
  const mvs = ["https://img2.tukuppt.com/video_show/15653652/01/31/19/62d4c3d754df3.mp4", "https://img2.tukuppt.com/video_show/14038878/01/29/68/62a6c11c15aad.mp4", "https://img2.tukuppt.com/video_show/2418175/00/02/29/5b549a9fe3580.mp4", "https://img2.tukuppt.com/video_show/15653652/01/31/20/62d4eb21736e0.mp4", ];
  let imgIdx = 0;
  pMaskTest.addEventListener("mouseover", (event) => {
    pMaskV.src = mvs[imgIdx];
    imgIdx++;
    imgIdx %= mvs.length;
  });
</script>