ArtPlayer/docs/esm.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ArtPlayer ESM with Import Map</title>
    <style>
        #player {
            max-width: 720px;
            aspect-ratio: 16 / 9;
            margin: 50px auto;
            border: 1px solid #ccc;
        }
    </style>
    <script type="importmap">
    {
        "imports": {
            "artplayer": "/compiled/artplayer.mjs",
            "artplayer-plugin-danmuku": "/compiled/artplayer-plugin-danmuku.mjs",
            "artplayer-plugin-document-pip": "/compiled/artplayer-plugin-document-pip.mjs",
            "id": "/compiled/i18n/id.mjs"
        }
    }
    </script>
</head>

<body>
    <div id="player"></div>
    <script type="module">
        import Artplayer from 'artplayer';
        import artplayerPluginDanmuku from 'artplayer-plugin-danmuku';
        import artplayerPluginDocumentPip from 'artplayer-plugin-document-pip';
        import id from 'id';

        const art = new Artplayer({
            container: '#player',
            url: '/assets/sample/video.mp4',
            i18n: { id },
            lang: 'id',
            plugins: [
                artplayerPluginDocumentPip(),
                artplayerPluginDanmuku({
                    danmuku: '/assets/sample/danmuku.xml',
                })
            ]
        });
    </script>
</body>

</html>