Overlay error

[hexabyte23]

Hi all
I am trying to use overlay text, and got this error

videojs-overlay.min.js:3 Uncaught TypeError: Cannot read properties of undefined (reading 'mergeOptions')
at T.e (videojs-overlay.min.js:3:558)
at T.s [as overlay] (video.min.js:21:34259)
at index.html:121:32

my code

        <video id="my-video" class="video-js" preload="auto"  poster="img/asw22.jpg" data-setup="{}">
            <source src="img/decoASW22.mp4" type="video/mp4" />
            <p class="vjs-no-js">
                To view this video please enable JavaScript, and consider upgrading to a
                web browser that
                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
            </p>
            <div class="vjs-control-content">
                <span class="vjs-control-text">Need Text</span>
            </div>
        </video>

    <script src="assets/vendor/videojs/8.17.4/video.min.js"></script>
    <script src="assets/vendor/videojs/videojs-overlay.min.js"></script>
    <script>
        var player = videojs('my-video', {
            autoplay: 'muted',
            loop: true
        });

        const overlay = player.overlay({
            content: 'Default overlay content',
            debug: true,
            overlays: [{
                content: 'The video is playing!',
                start: 'play',
                end: 'pause'
            }]
        }); 
        
    </script>

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.