Plyr doesn't work on next.js 14

[timomedia]

I use Plyr on next.js 14 and get the error "document is not defined". Previous versions all worked fine, only when upgrading to next.js 14 did I encounter the above error. Specifically, the error appears as below. Please help me check it

⨯ node_modules\plyr\dist\plyr.min.mjs (1:7201) @ document
 ⨯ ReferenceError: document is not defined
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at eval (./components/player.tsx:11:68)
    at (ssr)/./components/player.tsx (\.next\server\app\[movie]\page.js:249:1)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at eval (./app/[movie]/movieDetail.tsx:7:76)
    at (ssr)/./app/[movie]/movieDetail.tsx (\.next\server\app\[movie]\page.js:194:1)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)

null

[vvrtsaix]

Make it client component and use dynamic import

const Plyr = dynamic(() => import("plyr-react"), { ssr: false });

[timomedia]

Make it client component and use dynamic import

const Plyr = dynamic(() => import("plyr-react"), { ssr: false });
It really doesn't work. I tried using dynamic but it didn't work. I created a component called Player to use in different pages and using it the way you do doesn't work at all. Below is my original code that tried to use dynamic

"use client"
import React, { useEffect, useRef } from "react";
import dynamic from "next/dynamic";
import Hls from "hls.js";

const PlyrComponent = dynamic(() => import("plyr-react"), { ssr: false });

export default function Player({ videoUrl, poster }) {
    const option = {
        autoplay: false,
        controls: [
            'rewind',
            'play',
            'fast-forward',
            'progress',
            'current-time',
            'duration',
            'mute',
            'volume',
            'settings',
            'quality',
            'fullscreen',
        ],
    };
    const ref = useRef(null);

    useEffect(() => {
        const loadVideo = async () => {
            if (ref.current && typeof window !== 'undefined') {
                const plyr = ref.current.get('plyr');
                if (plyr) {
                    var hls = new Hls();
                    hls.loadSource(videoUrl);
                    hls.attachMedia(plyr.media);

                    hls.on(Hls.Events.MANIFEST_PARSED, function () {
                        plyr.play();
                    });
                }
            }
        };
        loadVideo();
    }, [videoUrl]);
    return (
        <PlyrComponent
            ref={ref}
            playsInline
            source={{
                type: "video",
                sources: [{ src: videoUrl, type: 'application/vnd.apple.mpegurl' }],
            }}
            poster={poster}
            options={option}
        />
    );
}