addEventListener with encrypted video-js is not working

Question

I have a video uploading project in laravel. Everything is good. I have encrypted videos using "FFMPEG" packge and wanted to play on video-js player. Also wanted to show google-adsense there.

The error is giving to me:

IDEOJS: ERROR: videojs-contrib-ads has not seen a loadstart event 5 seconds after being initialized, but a source is present. This indicates that videojs-contrib-ads was initialized too late. It must be initialized immediately after video.js in the same tick. As a result, some ads will not play and some media events will be incorrect. For more information, see http://videojs.github.io/videojs-contrib-ads/integrator/getting-started.html

and "addEventListener" is also not working except "document.addEventListener('DOMContentLoaded', function() {".

I think problem is due to data-setup='{}' add into video tag. because previously, I was playing the video without encryption like the original video with full path and there was not added the data-setup='{}'. Everything was working. But after playing the encrypted video. I got the errors.

Thank in advance!

my view is:

<video class="img-fluid myVideo video-js vjs-default-skin" id="content_video{{ $video_list->id }}" preload="none" controls data-video-id="{{ Crypt::encrypt($video_list->id) }}" data-setup='{}'>
        @if (Auth::check())
            <source src="{{ route('video.player.show', ['filename' => $video_list->unique_number.'.m3u8','type' => 'full','video_id' => $video_list->unique_number]) }}" type="application/x-mpegURL" class="full-video">
           
        @endif
</video>

js is:

<script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('afterload');
            const videos = document.querySelectorAll('.myVideo');
            let playing = [];

            videos.forEach((video, index) => {
                console.log('video');
                console.log(video.id);
                const overlay = document.querySelectorAll('.overlay')[index];
                const paymentoverlay = document.querySelectorAll('.paymentoverlay')[index];

                // Create a single player instance for each video
                const player = videojs(video.id);

                var options = {
                    id: 'content_video', // Use the correct ID for each video element
                    adTagUrl: 'http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=xml_vmap1&unviewed_position_start=1&cust_params=sample_ar%3Dpremidpostpod%26deployment%3Dgmf-js&cmsid=496&vid=short_onecue&correlator='
                };

                player.ima(options);

                video.addEventListener('ended', function() {
                console.log('111');
                    // Handle video conditions after it finishes
                    handleVideoConditions(video, overlay, paymentoverlay);
                });

                video.onplay = function() {
                    playing.push(video);
                    if (!video.paused) {
                        video.controls = true;
                        // Trigger an AJAX request to register the view
                        registerView(video);
                    }
                };
            });

            function handleVideoConditions(video, overlay, paymentoverlay) {
                console.log('222');
                const isShortVideo = video.querySelector('.short-video');
                const isFullVideo = video.querySelector('.full-video');
                if (!isUserLoggedIn && isShortVideo) {
                    overlay.style.display = 'block';
                } else if (isUserLoggedIn && isShortVideo) {
                    paymentoverlay.style.display = 'block';
                }
            }

            async function registerView(video) {
                const videoId = video.getAttribute('data-video-id');
                const response = await fetch(`{{ route('video.registerView', ['videoId' => ':videoId']) }}`
                    .replace(':videoId', videoId));
                const data = await response.json();
                $('#videoview' + data.id).html(data.view_count);
            }

        });
    </script>

Answer 1

I got my answer. I just added src into video tag. like:

<video class="img-fluid myVideo video-js vjs-default-skin" id="content_video{{ $video_list->id }}" preload="none" controls disablepictureinpicture data-video-id="{{ Crypt::encrypt($video_list->id) }}" src="{{ route('video.player.show', ['filename' => $video_list->unique_number.'.m3u8','type' => 'full','video_id' => $video_list->unique_number]) }}">

I don't know why. But it works now.