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

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.

Did you try to override hlsOptions autoStartLoad?

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<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>

<!-- end snippet -->

Cheers!