鼠标悬停时 WEBP 序列或 WEBM 文件擦除？

问题描述 投票：0回答：2

你知道当鼠标水平悬停在图像上时，是否可以使带 alpha 的 WEBP 序列或带 alpha 的 WEBM 电影可擦洗，否则它应该是静止的？

如果您向下滚动到此部分，则类似于 SketchFab 的首页中的 GIF 实现方式：

这是我用来测试的文件：

带有 ALPHA 的 WEBP 序列（5MB）： https://manujarvinen.com/webm-test/redish_turnaround.webp

带有 ALPHA 的 WEBM 电影，每帧都有关键帧 (4MB)： https://manujarvinen.com/webm-test/redish_turnaround.webm

html5-video webp webm
2个回答
0
投票

我设法在 ChatGPT 的帮助下实现了某种功能——但就我的生活而言，我就是不能让它水平和垂直居中，否则它会完全崩溃：/

https://codepen.io/manujarvinen/pen/MWqZKBP

<!DOCTYPE html>
<html>
<head>
  <title>WEBM-test</title>
</head>
<style>
  #video-container {
    position: relative;
    display: inline-block;
  }

  #video {
    width: 100%;
  }

  #scrubber {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
</style>
<body>
  <div id="video-container">
    <video id="video" preload="metadata">
      <source src="redish_turnaround.webm" type="video/webm">
      Your browser does not support the video tag.
    </video>
    <div id="scrubber"></div>
  </div>

  <script>
    const video = document.getElementById('video');
    const scrubber = document.getElementById('scrubber');
    const videoContainer = document.getElementById('video-container');

    video.addEventListener('loadedmetadata', () => {
      scrubber.style.width = `${video.clientWidth}px`;
      scrubber.style.height = `${video.clientHeight}px`;
    });

    scrubber.addEventListener('mousemove', (e) => {
      const rect = videoContainer.getBoundingClientRect();
      const mouseX = e.clientX - rect.left;
      const scrubPosition = (mouseX / rect.width) * video.duration;

video.currentTime = scrubPosition;
});

scrubber.addEventListener('mouseenter', () => {
video.pause();
});

scrubber.addEventListener('mouseleave', () => {
video.play();
});

video.addEventListener('mouseenter', () => {
video.pause();
});

video.addEventListener('mouseleave', () => {
video.play();
});
</script>


</body>
</html>
0
投票

在 ChatGPT 的帮助下，我做了这个： https://manujarvinen.com/webm-test/stackoverflow_webp_test.html

代码在文末

我刚刚通过 frame_0180.webp 将 180 帧 webp 图片（每张约 15KB）转储到名为 frame_0001.webp 的文件夹中。代码预加载它们然后显示。

至少功能正是我所追求的:)耶！

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scrubbable WEBP Image Sequence</title>
</head>
<style>
  #container {
    position: relative;
    width: 700px;
    height: 420px;
    overflow: hidden;
  }
  #image-sequence {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<body>

  <div style="position: relative; margin: auto; font-family: sans-serif; max-width: 700px;">

  <div style="position: absolute; margin: auto; font-family: sans-serif; max-width: 700px;">


  <div style="position:absolute">
                <div id="container">
                  <img id="image-sequence" src="frame_0001.webp" alt="Frame">


                <script>
                const container = document.getElementById('container');
                const imageSequence = document.getElementById('image-sequence');

                // Set the number of frames in your image sequence
                const totalFrames = 180;
                const framePrefix = 'frame_';
                const frameSuffix = '.webp';

                // Preload frames
                const frames = [];
                for (let i = 1; i <= totalFrames; i++) {
                  const frameNumber = String(i).padStart(4, '0');
                  const frameFilename = `${framePrefix}${frameNumber}${frameSuffix}`;

                  const frameImage = new Image();
                  frameImage.src = frameFilename;

                  frames.push(frameImage);
                }

                // Update the displayed image when the mouse is hovered over the container
                container.addEventListener('mousemove', (event) => {
                  const containerRect = container.getBoundingClientRect();
                  const mouseX = event.clientX - containerRect.left;
                  const frameIndex = Math.floor((mouseX / containerRect.width) * totalFrames);
                  updateFrame(frameIndex);
                });

                function updateFrame(frameIndex) {
                  if (frameIndex < 0 || frameIndex >= totalFrames) {
                    return;
                  }

                  imageSequence.src = frames[frameIndex].src;
                }

                </script>

      <h1>Webp images with transparency demo</h1>

      <p>This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
        This text appears under the image sequence, and it works in both Chrome and Firefox.
      </p>
  </div>
</div>
</div>
</div>


</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.