Quick Start
Lura Player is a web player SDK that enables HLS and DASH video playback in web 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. The SDK is written in TypeScript, a programming language that provides a strict type system and code stability, making it easier to integrate into TypeScript-based projects. Lura Player offers advanced advertisement support and a range of features for a seamless viewing experience, including support for multiple audio and subtitle tracks and advanced playback controls.
Integrating in a web application
Integrating Lura Player to your existing application is as easy as creating a text document. Just copy the following code into
an index.html file and start exploring.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lura Player Test</title>
</head>
<body>
<div id="player" style="width: 640px; height: 360px"></div>
<script src="https://w3.mp.lura.live/lura-player/web/latest/lura-player.js"></script>
<script>
const config = {
lura: {
appKey: "PqSpQb9pFu1A_v4qrMnRNwcXJGoFMO0B02BwGBQ4Zwa0_uMdXPXrqjnlSbJbkv8duDNk2-c3JbOXq2auBscWP1GyvlWlgFcIzaO6QFG74nY",
assetId: "5179678",
},
};
const player = new lura.Player(document.getElementById("player"));
player.setConfig(config);
</script>
</body>
</html>
Integrating in a webOS application
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/web/latest/lura-player.js"></script>
<script>
const config = {
lura: {
appKey: "PqSpQb9pFu1A_v4qrMnRNwcXJGoFMO0B02BwGBQ4Zwa0_uMdXPXrqjnlSbJbkv8duDNk2-c3JbOXq2auBscWP1GyvlWlgFcIzaO6QFG74nY",
assetId: "5179678",
},
};
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>
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.
Integrating in a Tizen Web Application
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
...
<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.
<?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/web/latest/lura-player.js"></script>
<script>
const config = {
lura: {
appKey: "PqSpQb9pFu1A_v4qrMnRNwcXJGoFMO0B02BwGBQ4Zwa0_uMdXPXrqjnlSbJbkv8duDNk2-c3JbOXq2auBscWP1GyvlWlgFcIzaO6QFG74nY",
assetId: "5179678",
},
};
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>
6.You can also implement your application as a hosted web application inside an iframe
Lura Player Polyfills is an optional library and generally not required for most use cases. However, it can be useful for certain plugins where additional compatibility is needed. For guidance on your specific use case, please contact our team.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body,
html,
iframe {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
function polyfill() {
const contentIFrame = document.getElementById("contentIFrame");
window.lura.polyfills.installAutomatically(contentIFrame);
contentIFrame.focus();
}
</script>
<script src="https://w3.mp.lura.live/lura-player/web/latest/lura-player-polyfills.js"></script>
</head>
<body>
<iframe id="contentIFrame" src="path/to/hosted/web/app" frameborder="0" scrolling="no" onload="polyfill()" allow="encrypted-media"></iframe>
</body>
</html>
Integrating in web frameworks
You can integrate the Lura Player in any web framework.
Check out the following pages for integrating in web frameworks: