复制视频

Question

实际操作方法是在我的应用程序中使用该视频，在 el Campo de visión de la pantalla este empiece a reproducirse，de igual manera si sale para que se temps, pero si estan 2 en el Campo de visión estos se 再现了 la vez y 鼻子 como hacer que solo el que se encuentra mas en el Campo d visión se reproduzca (Los controles son <\video>)

document.addEventListener('DOMContentLoaded', function () {

    const videos = document.querySelectorAll('.centro__vid');

    const observer = new IntersectionObserver(entries => {

        entries.forEach(entry =>
        {
            const video = entry.target;

            if (entry.isIntersecting)
            {
                video.currentTime = 0; video.play();
            }

            else
            {
                video.pause();
            }
        });
    });

    videos.forEach(video => {
        observer.observe(video);
    });
});

为了实现这一目标，我们将在实施过程中提供更多信息，让您能够在视频中看到更多内容，并在视觉效果中实现复制

Answer 1

在视频中单独记录更多内容，并使用

intersectionRatio

的属性再现，将 0 y 1 的比例显示为可见的视频。

IntersectionObserverEntry

---

代码说明：

---

变量

document.addEventListener('DOMContentLoaded', function () {
const videos = document.querySelectorAll('.centro__vid');
let currentMainVideo = null; // Esto almacenará el video principal que se está reproduciendo

const observer = new IntersectionObserver(entries => {
    let maxRatio = 0; // Variable para encontrar el máximo intersectionRatio
    let mainVideo = null; // Variable para encontrar el video con mayor intersectionRatio visible

    // Iterar sobre cada entrada para encontrar la de mayor visibilidad
    entries.forEach(entry => {
        const video = entry.target;

        if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {
            maxRatio = entry.intersectionRatio;
            mainVideo = video;
        }
    });

    // Actualizar el video principal
    if (mainVideo) {
        if (currentMainVideo && currentMainVideo !== mainVideo) {
            currentMainVideo.pause();
            currentMainVideo.currentTime = 0; // Reiniciar el tiempo del video previo si deseas
        }
        currentMainVideo = mainVideo;
        currentMainVideo.play();
    }

    // Asegurarse de pausar todos los videos no principales
    videos.forEach(video => {
        if (video !== currentMainVideo) {
            video.pause();
        }
    });
}, {
    threshold: 0.1  // Este valor es configurable según tus necesidades
});

videos.forEach(video => {
    observer.observe(video);
});
});

• ：
我们将使用 rastrear cuál 视频来定义实际情况并进行再现。

Iteración sobre

currentMainVideo
• ：
Para cada entrada，se verifica si está intersectando y si su

entries

es Mayor que el

intersectionRatio

registrado hasta el momento。 Si es así，se realiza

maxRatio

y se establece ese video como

maxRatio

。

实现和再现视频原理：

这是新的

mainVideo

，是不同的

mainVideo

，se pausa el

currentMainVideo

实际是必要的。 Luego，se 重现 el nuevo

currentMainVideo

。

Pausar 其他视频： 记录视频中的待办事项并保存 aquellos que no son el

mainVideo
• 。