with video.js

yigitbey · yigitbey · commit 3f71ac8e8a9b · 2020-11-12T01:25:08.000+01:00
diff --git a/index.html b/index.html
@@ -1,16 +1,43 @@
-<html>
-    <head>
-        <script src="https://player.live-video.net/1.1.2/amazon-ivs-player.min.js"></script>
-    </head>
-    <body>
-    <video id="video-player" playsinline></video>
+<!doctype html>
+<html lang="en">
+<head>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.6/video-js.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.6/video.min.js"></script>
+    <script src="https://player.live-video.net/1.1.2/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>
-    if (IVSPlayer.isPlayerSupported) {
-        const player = IVSPlayer.create();
-        player.attachHTMLVideoElement(document.getElementById('video-player'));
-        player.load("https://3b3a35c71f80.us-east-1.playback.live-video.net/api/video/v1/us-east-1.500851630739.channel.qZaQcHvfPYEY.m3u8");
-        player.play();
-    }
+        (function play() {
+            // Get playback URL from Amazon IVS API
+            var PLAYBACK_URL = 'https://3b3a35c71f80.us-east-1.playback.live-video.net/api/video/v1/us-east-1.500851630739.channel.qZaQcHvfPYEY.m3u8';
+            
+            // 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>
