onigetoc/hls-video.markdown

## hls-video.markdown

      
    Raw
  

              hls-video.markdown
            
          
    HLS Video

A Pen by Gino on CodePen.
License.

  
## index.html


<!doctype html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>

<!--     <h1 class="floating">Boreal Live Cam</h1> -->
    <video playsinline controls autoplay id="video" src="//rt-news-gd.secure2.footprint.net/1103.m3u8"></video>
  </body>
</html>

## script.js
//const playlist = "//rcavlive.akamaized.net/hls/live/664044/cancbft/master.m3u8";
//var video = document.getElementById("video");
var video = document.getElementsByTagName('video')[0];
var src = video.src;
//alert(src);
if (Hls.isSupported()) {
  var hls = new Hls();
  //hls.loadSource(playlist);
  hls.loadSource(src);
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    video.play();
  });
} else if (video.canPlayType("application/x-mpegURL")) {
  // 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.
  // Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
  // white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.type="application/x-mpegURL"
  video.src = playlist;
  video.addEventListener("loadedmetadata", function() {
    video.play();
  });
}

## style.css
video {
  width: 400px;
  display: block;
}


	<!doctype html>
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>

	<!-- <h1 class="floating">Boreal Live Cam</h1> -->
	<video playsinline controls autoplay id="video" src="//rt-news-gd.secure2.footprint.net/1103.m3u8"></video>
	</body>
	</html>
	//const playlist = "//rcavlive.akamaized.net/hls/live/664044/cancbft/master.m3u8";
	//var video = document.getElementById("video");
	var video = document.getElementsByTagName('video')[0];
	var src = video.src;
	//alert(src);
	if (Hls.isSupported()) {
	var hls = new Hls();
	//hls.loadSource(playlist);
	hls.loadSource(src);
	hls.attachMedia(video);
	hls.on(Hls.Events.MANIFEST_PARSED, function() {
	video.play();
	});
	} else if (video.canPlayType("application/x-mpegURL")) {
	// 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.
	// Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
	// white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.type="application/x-mpegURL"
	video.src = playlist;
	video.addEventListener("loadedmetadata", function() {
	video.play();
	});
	}