@latest-thinking/lt-player 1.0.9-e → 1.1.0

package/ README.md

@@ -0,0 +1,144 @@
+# Title
+____
+# Features
+
+# Quick setup
+
+## HTML
+
+Player extends upon the standard [HTML5 media element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) markup so that's all you need for those types.
+
+### HTML5 Video
+
+```html
+<div class="lt-player"
+    data-lt-player-config='{config}'>
+</div>
+```
+
+**Note**: It is mandatory to add the class with the name "lt-player", to be instantiated by the Player Manager and data-lt-player-config = {config object}
+
+## JavaScript
+
+```html
+<div class="lt-player"
+    data-lt-player-config='{config}'>
+</div>
+<script>
+    window.addEventListener('load', () => {
+        const player = Player.initByClassOrID('lt-player').then(player => {
+            return player;
+        });
+    })
+</script>
+```
+
+You can use initByClassOrID method, to instantiate player by string name. Mandatory data-lt-player-config={config object}
+
+...OR...
+
+You can use initBySelector method, to instantiate player by HTMLElement. Mandatory data-lt-player-config={config object}
+
+```html
+<div class="lt-player">
+</div>
+<script>
+    window.addEventListener('load', () => {
+        let selector = document.querySelector('lt-player');
+      
+        const player = Player.initBySelector(selector).then(player => {
+            return player;
+        });
+    })
+</script>
+```
+
+You can instantiate multiple player by HTMLElement. Mandatory data-lt-player-config={config object}
+
+```html
+<div class="lt-player">
+</div>
+<div class="lt-player">
+</div>
+<div class="lt-player">
+</div>
+<div class="lt-player">
+</div>
+<script>
+    window.addEventListener('load', () => {
+        let selectors = document.querySelectorAll('lt-player');
+        
+        selectors.forEach(item => {
+            Player.initBySelector(item).then(player => {
+                console.log(player)
+            });
+        })
+    })
+</script>
+```
+
+You can instantiate by javascript object config. See examples:
+```html
+<div class="lt-player">
+</div>
+<script>
+    window.addEventListener('load', () => {
+      
+        const objectConfig =
+            {
+                version: "2",
+                body: {
+                    playerContainer: 'lt-player' //mandatory 
+                }
+            }
+        
+        const player = Player.initPlayer(objectConfig).then(player => {
+            return player;
+        });
+    })
+</script>
+```
+
+```html
+<div class="lt-player">
+</div>
+<script>
+    window.addEventListener('load', () => {
+      
+        const objectConfig =
+            {
+                version: "2",
+                body: {
+                    playerContainer: 'lt-player' //mandatory 
+                }
+            }
+        const selector = document.querySelector('lt-player');
+        
+        const player = Player.initBySelector(selector, objectConfig).then(player => {
+            return player;
+        });
+    })
+</script>
+```
+
+```html
+<div class="lt-player">
+</div>
+<script>
+    window.addEventListener('load', () => {
+      
+        const objectConfig =
+            {
+                version: "2",
+                body: {
+                    playerContainer: 'lt-player' //mandatory 
+                }
+            }
+        
+        const player = Player.initByClassOrID('lt-player', objectConfig).then(player => {
+            return player;
+        });
+    })
+</script>
+```
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.9-e",
+  "version": "1.1.0",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",