To integrate Paella Player in your portal, you must to suply a series of data about the video streams and the user account. Some of these data are optional, but if aren’t supplied is possible that some features are disabled.
All the information about a particular video is stored in the video manifest file video manifest file. The video loading APIs are used to get the video manifest.
There are many options for loading Paella Player. Let’s see several examples starting from the following code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8;">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Paella Engage Example</title>
<script type="text/javascript" src="javascript/swfobject.js"></script>
<script type="text/javascript" src="javascript/base.js"></script>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/lunr.min.js"></script>
<script type="text/javascript" src="javascript/require.js"></script>
<script type="text/javascript" src="javascript/paella_player_es2015.js"></script>
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css" type="text/css" media="screen" charset="utf-8">
<script>
function loadMyPlayer(containerId) {
// Load paella player here
}
</script>
</head>
<body onload="loadMyPlayer('playerContainer)">
<div id="playerContainer" style="display:block;width:100%"></div>
</body>
</html>
This is the most convenient method to load Paella Player if you can offer a backend where the manifests are accesible:
function loadMyPlayer(containerId) {
paella.load('playerContainer', { });
}
The manifest files will be searched in the default path, which is specified in the config.json file.
{
...
"standalone" : {
"repository": "../repository/"
},
...
}
But optionally, you can set the Paella Player repository path dinamically using the url
parameter:
function loadMyPlayer(containerId) {
paella.load('playerContainer', { url:'../repository/' });
}
If the url
is specified in the paella.load()
parameters, the repository
attribute in the configuration file will be ignored. Note that the url
path has to end with a slash /
.
The final video manifest path will be generated as follows:
[repositoryUrl]/[videoId]/data.json
By default, Paella Player gets the video identifier from the URL:
http://yourvideoplayersite.com/index.html?id=yourVideoIdentifier
But you can use the getId
parameter to override this behavior:
function loadMyPlayer(containerId) {
paella.load('playerContainer', { getId: () => "my-video-id" });
}
It’s possible to customize the way in which the path of the video manifest is generated using the videoUrl
and dataUrl
parameters. Both parameters have to be functions that return the video manifest base path and the full path of the video manifest file respectively. By default, the dataUrl
function calls the videoUrl
function. Depending on what you want to do, you will have to override one, the other or both.
function loadMyPlayer(containerId) {
paella.load('playerContainer', { dataUrl: function() {
return "full/video/manifest/path";
}});
}
To access these functions from your code, Paella Player exposes them through the following APIs:
// `url` initialization parameter, or the content of
// standalone.repository in config.json
paella.player.repoUrl
// Result of `getId()` init parameter
paella.player.videoId
// Result of `videoUrl()` init parameter
paella.player.videoUrl
// Result of `dataUrl()` init parameter
paella.player.dataUrl
In the following example you can see an implementation that emulates the default behavior of Paella Player, using getId
, dataUrl
and videoUrl
`
function myLoadPaella(containerId) {
paella.load(containerId, {
getId:() => {
return base.parameters.get("id");
},
videoUrl: () => {
return `${ paella.player.repoUrl }${ paella.player.videoId }/`;
},
dataUrl: () => {
return `${ paella.player.videoUrl }/data.json`;
}
});
}
By default, the Paella Player configuratio is obtained from the configuration file, which can be found in paellaPlayerPath/config/config.json
. But you have two options change the configuration file origin.
Yo can use the configUrl
parameter in the paella.load()
function to set the path of the configuration file:
function loadMyPlayer(containerId) {
paella.load(containerId, { configUrl:'otherConfigPath/config.json' });
}
You can get the configuration on your own and pass it to Paella Player with the parameter config
:
function loadMyPlayer(containerId) {
fetch('my_rest_api/player/config')
.then((response) => {
return response.json();
})
.then((config) => {
paella.load(containerId, { config:config });
})
.catch((err) => {
console.error(err.message);
});
}
Paella provides a homogeneous mechanism to write and read persistent data. You can see how it works here