Can not stop video in while loading first time m3u8 from Hls()

Question

Currently, I am trying use HlsJS to play m3u8 video in my web application but when I load video irrespective of autoplay attribute it starts playing when I load it first time.

Here is my javascript code:

const videoElement = document.getElementById(<unique-id>)


const hls = new Hls()
hls.loadSource(src)
hls.attachMedia(videoElement)

hls.on(Hls.Events.MEDIA_ATTACHED, function () {
    console.log('media attached')
})

hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
})

hls.on(Hls.Events.MANIFEST_LOADED, function () {
})

Note here I have used this hls file : https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.3/hls.min.js

Below code is of html tag :

<video
  id={uniqueKey}
  muted={muted}
  loop={loop}
  height='100%'
  width='100%'
  playsInline
/>

I also tried add eventListener as and stopping video but it also does not work :

videoElement.addEventListener('canplay', () => {
videoElement.pause()
})

Here, I am expecting m3u8 video gets stopped when I load the video.

Answer 1

Did you try to override hlsOptions autoStartLoad?

Answer 2

Let me know if this is what you mean, I've added poster on the vide and enable the controls, just delete it if not needed.

<video id="myVideo" muted loop height="50%" width="50%" playsinline controls></video>

  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const videoElement = document.getElementById('myVideo');
      const hls = new Hls();

      hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
      hls.attachMedia(videoElement);

      hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        console.log('Media attached');
        extractPosterFromVideo(videoElement);
      });

      hls.on(Hls.Events.MANIFEST_PARSED, function () {
        videoElement.pause();
        console.log('Manifest parsed');
      });

      hls.on(Hls.Events.MANIFEST_LOADED, function () {
        videoElement.pause();
        console.log('Manifest loaded');
      });


    //   Code is for Poster/Thumbnail of the video at 3 seconds scene

      function extractPosterFromVideo(video) {
        // Seek to the desired time in seconds
        const seekTime = 3;
        video.currentTime = seekTime;

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        // Set the canvas size to match the video dimensions
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        video.addEventListener('seeked', function() {
          context.drawImage(video, 0, 0, canvas.width, canvas.height);
          const imageData = canvas.toDataURL();
          video.setAttribute('poster', imageData);
        });
      }

    });
  </script>

Cheers!