Skip to main content

Quick Start

To add the Lura Player to your WebOS application, you can follow the following guide:

1. Install the WebOS TV CLI

You can install the WebOS TV CLI from LG Developer Website

2. Create a WebOS App

ares-generate -t basic ./LuraPlayerDemoApp

3. Change current working directory to LuraPlayerDemoApp

cd LuraPlayerDemoApp

4. Copy the following code to index.html

<!DOCTYPE html>
<html>
    <head>
        <title>WebOS V4 Test App</title>
        <style type="text/css">
            body {
                width: 100%;
                height: 100%;
                background-color: white;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="player" style="width: 100vw; height: 100vh" tabindex="0"></div>
        <script src="https://w3.mp.lura.live/lura-player/latest/lura-player.js"></script>
        <script>
            const config = {
                content: {
                    title: "Tears of steel",
                    media: [
                        {
                            url: "https://w3.mp.lura.live/test-assets/tears-of-steel/hls-ts.m3u8",
                            type: "application/x-mpegURL",
                        },
                        {
                            url: "https://w3.mp.lura.live/test-assets/tears-of-steel/dash.mpd",
                            type: "application/dash+xml",
                        },
                        {
                            url: "https://w3.mp.lura.live/test-assets/tears-of-steel/mp4.mp4",
                            type: "video/mp4",
                        },
                        {
                            url: "https://w3.mp.lura.live/test-assets/tears-of-steel/captions/en.vtt",
                            type: "text/vtt",
                            language: "en",
                        },
                        {
                            url: "https://w3.mp.lura.live/test-assets/tears-of-steel/captions/es.vtt",
                            type: "text/vtt",
                            language: "es",
                        },
                        {
                            url: "https://w3.mp.lura.live/test-assets/tears-of-steel/poster.jpg",
                            type: "image/jpg",
                        },
                        {
                            url: "https://w3.mp.lura.live/test-assets/tears-of-steel/trick-play/hi.bif",
                            type: "image/bif",
                            width: 640,
                            height: 360,
                        },
                    ],
                },
            };
            const player = new lura.Player(document.getElementById("player"));
            player.setConfig(config);
        </script>
        <script>
            window.addEventListener("load", () => {
                document.getElementById("player").firstChild.firstChild.focus();
            });
        </script>
    </body>
</html>
info

Note that you need to replace the placeholder value for the "config" property with your own Lura Player config.

5. Launch the app on a simulator

For installing simulator, follow the Simulator Installation

ares-launch -s 23 .

That's it! You should now see the Lura Player embedded in your WebOS application.