Creating the player
The player can be integrated by hosting the following lines of HTML on an HTTP server. This procedure is described on a step-by-step basis; to add all the code in one go, see Completed code below. For more information about the code, see Code details.
- Extract the following files from within the opy-sdk-browser-1.7.x-integration.zip:
- opy-sdk-browser-all-debug.js
- opy-sdk-browser.css
Host these files where they will be accessible to the HTML page you are creating.
On your website or
localhost
environment, host the following snippet of HTML:XML<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <div style="width: 80%;margin:auto"></div> </body> </html>
Link the HTML to the SDK by inserting the script and CSS references into the
<head>
section:XML<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="opy-sdk-browser-all-debug.js"></script> <link rel="stylesheet" href="opy-sdk-browser.css" /> </head>
Insert the
<video>
tag into the<body>
of your HTML.XML<body> <div style="width: 80%;margin:auto"> <video class="video-js vjs-default-skin vjs-16-9" id="videoPlayer" controls crossorigin="anonymous" ></video> </div> </body>
Configure the player with the URL of the content to be played by adding the following JavaScript inside a
<script></script>
tag pair within the<body>
section:JS<script> document.addEventListener("DOMContentLoaded", () => { const playerInstance = otvplayer( "videoPlayer", { plugins: { otvtoolkit: { licence: "XXXXXXXXXX" } } }, () => { playerInstance.src({ src: "https://d3bqrzf9w11pn3.cloudfront.net/basic_dash_bbb_clear/bbb_public.mpd", type: "application/dash+xml" }); } ); }); </script>
- Embed your player key by either:
- Placing the opy_licence file in the same folder as the page on which the player is integrated (alongside the .html file), or
- Replacing "XXXXXXXXXX" in the script above with the licence string from the opy_licence file.
See Player licence and the completed code below.
- Navigate to the web page to test the player.
Completed code
Your completed code should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="opy-sdk-browser-all-debug.js"></script>
<link rel="stylesheet" href="opy-sdk-browser.css" />
</head>
<body>
<div style="width: 80%;margin:auto">
<video
class="video-js vjs-default-skin vjs-16-9"
id="videoPlayer"
controls
crossorigin="anonymous"
></video>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const playerInstance = otvplayer(
"videoPlayer",
{
plugins: {
otvtoolkit: {
licence: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIs..."
}
}
},
() => {
playerInstance.src({
src: "https://d3bqrzf9w11pn3.cloudfront.net/basic_dash_bbb_clear/bbb_public.mpd",
type: "application/dash+xml"
});
}
);
});
</script>
</body>
</html>
Next step: You can now add Player features
.