안녕하세요.

웹페이지 프론트 작업중인데요

리스트에 마우스를 오버하면 커서를 따라다니는 툴팁이 노출되는 기능이 있습니다.

해당 툴팁에는 이미지나 동영상 파일이 아닌 iframe에 유튜브 동영상 아이디를 따와서 각 리스트에 마우스 오버시 해당 리스트에 맞는 동영상 아이디를 바인딩해서 재생되게 하는 기능인데요

(예시를 들기위해 https://florentbiffi.com/ 해당 사이트 중간쯤에 project 보시면 마우스 오버하면 나오는 이미지 툴팁이 저의 경우엔 iframe을 통한 유튜브 동영상 툴팁입니다.)

이슈는 각 리스트에 마우스를 오버할때마다 바인딩되는 동영상 아이디가 변경돼서 다른 동영상이 재생되다보니 리스트1 > 리스트2로 마우스를 옮길때마다 계속 유튜브 api 호출이됩니다. 그래서 버벅이구요.

이 부분은 확신 할 수 있는게 우선 리스트(아코디언 리스트임)랑 클릭해서 상세내용이 드롭다운 됐을때 나오는 콘텐츠에 들어가있는 swiper slide들도 같이 일정부분 스크롤 될때마다 돔에 그릴수있게 lazy-loading 처리 해놨고 iframe태그는 그대로 두고 src만 바인딩 시켜주는 부분만 주석처리 해보니까 쾌적하더라구요..ㅋㅋㅋ

하지만, 클라이언트는 버벅이는거 어떻게 안되냐 그러시는데 제 짧은 경험으로는 도저히 방법을 모르겠어서 질문 드립니다.

api자체를 최적화해서 호출하는 방법은 없을거같고... 저는 gif움짤이나 필요한 부분만 따서 mp4파일 만들고, 압축해서 넣으면 더 쾌적할거같은데.. 그건 또 싫다고 하시니... 어떻게 해야할까요??

아래는 소스 부분입니다.

if (!platformCheck()) return;
    
const embedUrl = data.map(d => d.url);
const tooltipBox = document.querySelector(".tooltip_box");
const iframe = document.createElement("iframe");
const hoverBox = document.querySelectorAll(".work_list .list button");

iframe.setAttribute("class", "video_tooltip");
iframe.setAttribute("name", "work");
iframe.setAttribute("frameborder", "0");
iframe.width = "560";
iframe.height = "315";
tooltipBox.appendChild(iframe);

hoverBox.forEach((obj, i) => {
    obj.addEventListener("mouseenter", function(e) {
        const tl = gsap.timeline();
        tl
        .to(".cursor", {
            duration: 0.1,
            scale: 1.8,
            mixBlendMode: "difference",
        })
        .to(this, {
            duration: 0.3,
            letterSpacing: "3px",
        }, "<")
        .to(tooltipBox, {
            duration: 0.3,
            opacity: 1,
            display: "block",
        }, "<");
        // 아래 부분이 동영상 id
        iframe.src = `https://www.youtube.com/embed/${embedUrl[i]}?rel=0&autoplay=1&mute=1&controls=0&enablejsapi=1&fs=0&modestbranding=1&playsinline=1&color=white"`;
        e.stopImmediatePropagation();
    });

    obj.addEventListener("mouseleave", function(e) {
        const tl = gsap.timeline();
        tl
        .to(".cursor", {
            duration: 0.1,
            scale: 1,
            mixBlendMode: "normal",
        })
        .to(this, {
            duration: 0.3,
            "letter-spacing": "0",
        }, "<")
        .to(tooltipBox, {
            duration: 0.3,
            opacity: 0,
            display: "none",
        }, "<");
        e.stopImmediatePropagation();
    });
    
    obj.addEventListener("mousemove", (e) => {
        const mouseX = e.clientX;
        const mouseY = e.clientY;

        tooltipBox.style.left = mouseX + "px";
        tooltipBox.style.top = mouseY - tooltipBox.clientHeight + "px";

        if (tooltipBox.offsetTop < 0) tooltipBox.style.top = mouseY + "px";
    });
});

감사합니다.

현재버전·원글보기

수정이력

2022-01-14 15:00:55 에 아래 내용에서 변경되었습니다.

2022-01-14 14:56:17 에 아래 내용에서 변경되었습니다.

2022-01-14 14:55:24 에 아래 내용에서 변경되었습니다.

2022-01-14 14:54:45 에 아래 내용에서 변경되었습니다.

2022-01-14 14:53:49 에 아래 내용에서 변경되었습니다.