How do i embed this m3u8 into my webpage?

Question

My title says it all. i have m3u8 file i need to embed

tried using this method(below) but it says "video format or mime type is not supported"

<div id='player'>
            <video width=100% height=100% src="http://cdncities.com/deranalive/deranalive/playlist.m3u8" type="application/x-shockwave-flash" controls autoplay>
            </video>

</div>

i tried jwplayer wizard, on there it works, but it not free.... i am dont know what to do.

anyone know a free player? or solution for that code?

thanks.

Answer 1

Only Safari 6.0+ has native HLS support. You can't use it with HTML5 on a desktop.

A free player that supports HLS via Flash is mediaelement.js

mediaelement.js - HLS Demo.

Answer 2

easy sir you can follow this file:

<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('http://cdncities.com/deranalive/deranalive/playlist.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
 // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
 // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
 // This is using the built-in support of the plain video element, without using hls.js.
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'http://cdncities.com/deranalive/deranalive/playlist.m3u8';
    video.addEventListener('canplay',function() {
      video.play();
    });
  }
</script>