yusufusta/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HLS Demo</title>
    <link rel="stylesheet" href="https://cdn.plyr.io/1.8.2/plyr.css">
  </head>
  <body>
    <video preload="none" id="player" autoplay controls crossorigin></video>
    <script src="https://cdn.plyr.io/1.8.2/plyr.js"></script>
    <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
  </body>
</html>

## plyr-hls-js.markdown

      
    Raw
  

              plyr-hls-js.markdown
            
          
    Plyr + hls.js

A Pen by Sam Potts on CodePen.
License.

  
## script.js
(function () {
  var video = document.querySelector('#player');

  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
    });
  }

  plyr.setup(video);
})();

## style.css
body {
  max-width: 1024px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>HLS Demo</title>
	<link rel="stylesheet" href="https://cdn.plyr.io/1.8.2/plyr.css">
	</head>
	<body>
	<video preload="none" id="player" autoplay controls crossorigin></video>
	<script src="https://cdn.plyr.io/1.8.2/plyr.js"></script>
	<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
	</body>
	</html>
	(function () {
	var video = document.querySelector('#player');

	if (Hls.isSupported()) {
	var hls = new Hls();
	hls.loadSource('https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8');
	hls.attachMedia(video);
	hls.on(Hls.Events.MANIFEST_PARSED,function() {
	video.play();
	});
	}

	plyr.setup(video);
	})();