CODEWITHSUNDEEP
htmlhttpstreamingvideo-streaminghttp-live-streaming
flofreelance
flofreelance

Reputation: 944

Playing m3u8 video with video tag

<video width="352" height="198" controls>
    <source src="video.m3u8" type="application/x-mpegURL">
</video>

This code works fine with all browsers on my android device but doesn't works on Firefox / Chrome / Safari on my computer. I need to play the video on all devices. What can I do?

Upvotes: 2

Views: 1737

Answers (2)

Kofi Sammie
Kofi Sammie

Reputation: 3627

this should easily work

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

Upvotes: 0

szatmary
szatmary

Reputation: 31101

HLS is not supported on most browsers natively. But can be played via libraries such as hls.js.

Upvotes: 5

Related Questions