skip to Main Content

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


  1. Did you try to override hlsOptions autoStartLoad?

    Login or Signup to reply.
  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!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search