How to autoplay enable for my livestream with voice

Question

    ** Please help me for autoplay live stream with voice. There is muted autoplay.
please correct me where i am doing mistake. **

add video library

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

video add in your page

<video
  id="my-player"
  controls
 autoplay muted loop
/>

script for videoplayer

<script>
  const video = document.querySelector('#my-player');
  const src = 'https://stream.mux.com/yyFGolovbOWRmtsF4eG01SVFgl6VsyGMH4i7dxUVsjxo.m3u8';
  if (video.canPlayType('application/vnd.apple.mpegurl')) {
    // Some browers (safari and ie edge) support HLS natively
    video.src = src;
  } else if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(src)
    hls.attachMedia(video);
  } 

</script>  
  

Please correct me where i am doing mistake

Answer 1

Try this, load the source after the media is attached to the video element.

<script>
  const video = document.querySelector('#my-player');
  const src = 'https://stream.mux.com/yyFGolovbOWRmtsF4eG01SVFgl6VsyGMH4i7dxUVsjxo.m3u8';
  if (video.canPlayType('application/vnd.apple.mpegurl')) {
    // Some browers (safari and ie edge) support HLS natively
    video.src = src;
  } else if (Hls.isSupported()) {
    const hls = new Hls();
    //////hls.loadSource(src) // Remove this line
    hls.attachMedia(video);
    hls.on(Hls.Events.MEDIA_ATTACHED, function() {
      // fired when MediaSource has been succesfully attached to media element
      // Now load the source m3u8
      try {
        hls.loadSource(src);
      } catch (err) {
        console.log('Error Loading Source Media!!! ' + err);
      }
    });
  }

</script>