Skip to main content

Quick Start

Lura Player is a web player SDK that enables HLS and DASH video playback in Tizen applications. It has a user-friendly interface, developer-friendly SDK and includes industry standard capabilities, making it a comprehensive solution for video streaming and advertising.

1. Install Tizen Studio and TV SDK

Follow the guide on Installing TV SDK

2. Create a sample app

In order to create a sample app, follow the following steps.

  • Launch the Tizen Studio.
  • Select your workspace directory and click Launch.
  • File > New > Tizen Project
  • Template > TV > Web Application > Basic Project
  • Change the name of your project to LuraPlayerTest and click Finish button.

3. Create your certificates

Follow the guide on Creating Certificates

4. Adjust the Privileges in the Config.xml

config.xml
...
<access origin="*" subdomains="true"></access>
<tizen:privilege name="http://tizen.org/privilege/internet"/>
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>
<tizen:privilege name="http://developer.samsung.com/privilege/productinfo"></tizen:privilege>
<tizen:privilege name="http://developer.samsung.com/privilege/drminfo"/>
<tizen:privilege name="http://developer.samsung.com/privilege/drmplay"/>
...

Your final config.xml should look like this.

config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/LuraPlayerTest" version="1.0.0" viewmodes="maximized">
    <tizen:application id="tv8MbKs4vR.LuraPlayerTest" package="tv8MbKs4vR" required_version="2.3"/>
    <access origin="*" subdomains="true"></access>
    <tizen:privilege name="http://tizen.org/privilege/internet"/>
    <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
    <tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>
    <tizen:privilege name="http://developer.samsung.com/privilege/productinfo"></tizen:privilege>
    <tizen:privilege name="http://developer.samsung.com/privilege/drminfo"/>
    <tizen:privilege name="http://developer.samsung.com/privilege/drmplay"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
    <icon src="icon.png"/>
    <name>LuraPlayerTest</name>
    <tizen:profile name="tv-samsung"/>
    <tizen:setting screen-orientation="landscape" context-menu="enable" background-support="disable" encryption="disable" install-location="auto" hwkey-event="enable"/>
</widget>

5.Now you can implement the Lura Player in your Tizen Web Application

<!DOCTYPE html>
<html>
    <head>
        <title>Tizen Lura Player 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>