Discussions

I encountered this error when loading a video generated using the Talk Standard API on the D-ID API

Access to video at 'https://d-id-talks-prod.s3.us-west-2.amazonaws.com/auth0%7C65a937df234348a022c39299/tlk_9ZW_d0HJSjJqmUGTbYRoM/1739654736498.mp4?AWSAccessKeyId=AKIA5CUMPJBIK65W6FGA&Expires=1739741139&Signature=utVXMqS9k%2B7iy8yWSRhczQm%2FrlI%3D' from origin 'https://agent.chichbong.com:3009' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://d-id-talks-prod.s3.us-west-2.amazonaws.com/auth0%7C65a937df234348a022c39299/tlk_9ZW_d0HJSjJqmUGTbYRoM/1739654736498.mp4?AWSAccessKeyId=AKIA5CUMPJBIK65W6FGA&Expires=1739741139&Signature=utVXMqS9k%2B7iy8yWSRhczQm%2FrlI%3D net::ERR_FAILED 206 (Partial Content)

How can I fix it? Please help me

Here is the code on my frontend. The backend is working fine, and D-ID has returned the video. However, it cannot be played due to a CORS error.

        async function createDIDVideo(text) {
            const response = await fetch("https://***********/d-id/talks", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ text })
            });

            if (!response.ok) {
                throw new Error(`D-ID request failed: ${response.status}`);
            }

            const data = await response.json();
            if (!data.video_url) {
                throw new Error("Không tìm thấy URL video từ D-ID.");
            }

            console.log("DEBUG: D-ID Video URL:", data.video_url);

            // Cập nhật video
            const videoEl = document.getElementById("agentVideo");
            videoEl.setAttribute("crossorigin", "anonymous");
            videoEl.src = data.video_url;
            videoEl.type = "video/mp4";
            videoEl.autoplay = true;
            videoEl.playsInline = true;
            videoEl.muted = false;
            videoEl.load();

            // Khi video đã tải đủ, hiển thị và ẩn ảnh nền
            videoEl.addEventListener("canplaythrough", () => {
                console.log("DEBUG: Video đã tải đủ để phát.");
                videoEl.play().catch(error => console.error("Lỗi phát video:", error));
            });

            videoEl.addEventListener("loadeddata", () => {
                videoEl.style.display = "block";
                document.getElementById("videoContainer").style.background = "none";
            });
        }