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.
2
Answers
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.
Cheers!