Skip to main content

Getting Started

This section explains the basics of how to use the JavaScript API component of Lura Player. This API can be used to enhance the functionality of your video embeds or to implement rich page-level video interactions.

To get started, copy the following code to the index.html file of your webos app and start exploring in the console.

<!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>