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:

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