VioletVivirand/index-hlsjs.html

## index-hlsjs.html
<html>
  <head>
    <title>Hls.js demo - basic usage</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.1/dist/hls.min.js"></script>

    <center>
      <h1>Hls.js demo - basic usage</h1>
      <video height="600" id="video" controls="" disableremoteplayback=""><source type="video/mp4"></video>
    </center>
    <script>
      var video = document.getElementById('video');
      var videoSrc = 'PLACEHOLDER';  // Replace with your m3u8 URL
      if (Hls.isSupported()) {
        console.log('Hello HLS.js!');
        var hls = new Hls({
          debug: true,
        });
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
          video.muted = true;
          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 through 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 = videoSrc;
        video.addEventListener('canplay', function () {
          video.play();
        });
      }
    </script>
</body>

## index-videojs.html
<!doctype html>
<html lang="en">
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video-js.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video.min.js"></script>
    <script src="https://player.live-video.net/1.26.0/amazon-ivs-videojs-tech.min.js"></script>
</head>

<body>
    <div class="video-container">
        <video id="amazon-ivs-videojs" class="video-js vjs-4-3 vjs-big-play-centered" controls autoplay playsinline></video>
    </div>
    <style>
        body {
            margin: 0;
        }

        .video-container {
            width: 640px;
            height: 480px;
            margin: 15px;
        }
    </style>
    <script>
        (function play() {
            // Get playback URL from Amazon IVS API
            var PLAYBACK_URL = 'PLACEHOLDER';  // Replace with your m3u8 URL

            // Register Amazon IVS as playback technology for Video.js
            registerIVSTech(videojs);

            // Initialize player
            var player = videojs('amazon-ivs-videojs', {
               techOrder: ["AmazonIVS"]
            }, () => {
               console.log('Player is ready to use!');
               // Play stream
               player.src(PLAYBACK_URL);
            });
        })();
    </script>
</body>
</html>
	<html>
	<head>
	<title>Hls.js demo - basic usage</title>
	</head>
	<body>
	<script src="https://cdn.jsdelivr.net/npm/hls.js@1.5.1/dist/hls.min.js"></script>

	<center>
	<h1>Hls.js demo - basic usage</h1>
	<video height="600" id="video" controls="" disableremoteplayback=""><source type="video/mp4"></video>
	</center>
	<script>
	var video = document.getElementById('video');
	var videoSrc = 'PLACEHOLDER'; // Replace with your m3u8 URL
	if (Hls.isSupported()) {
	console.log('Hello HLS.js!');
	var hls = new Hls({
	debug: true,
	});
	hls.loadSource(videoSrc);
	hls.attachMedia(video);
	hls.on(Hls.Events.MEDIA_ATTACHED, function () {
	video.muted = true;
	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 through 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 = videoSrc;
	video.addEventListener('canplay', function () {
	video.play();
	});
	}
	</script>
	</body>
	<!doctype html>
	<html lang="en">
	<head>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video-js.css" rel="stylesheet">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video.min.js"></script>
	<script src="https://player.live-video.net/1.26.0/amazon-ivs-videojs-tech.min.js"></script>
	</head>

	<body>
	<div class="video-container">
	<video id="amazon-ivs-videojs" class="video-js vjs-4-3 vjs-big-play-centered" controls autoplay playsinline></video>
	</div>
	<style>
	body {
	margin: 0;
	}

	.video-container {
	width: 640px;
	height: 480px;
	margin: 15px;
	}
	</style>
	<script>
	(function play() {
	// Get playback URL from Amazon IVS API
	var PLAYBACK_URL = 'PLACEHOLDER'; // Replace with your m3u8 URL

	// Register Amazon IVS as playback technology for Video.js
	registerIVSTech(videojs);

	// Initialize player
	var player = videojs('amazon-ivs-videojs', {
	techOrder: ["AmazonIVS"]
	}, () => {
	console.log('Player is ready to use!');
	// Play stream
	player.src(PLAYBACK_URL);
	});
	})();
	</script>
	</body>
	</html>