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 the Completed code below. For more information about the code, see Code details.

Extract the following files from the opy-sdk-browser-<version>-integration.zip and host them where they will be accessible to the HTML page you are creating.
- opy-sdk-js-all-debug.js
- opy-sdk-js.css

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-js-all-debug.js"></script>
		    <link rel="stylesheet" href="opy-sdk-js.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>:

JS

<script>
    document.addEventListener("DOMContentLoaded", () => {
	    const playerInstance = otvplayer(
		    "videoPlayer",
		    {
			    plugins: {
				    otvtoolkit: {
				    }
			    }
		    },
		    () => {
			    playerInstance.src({
				    src:
					   "https://d3bqrzf9w11pn3.cloudfront.net/basic_dash_bbb_clear/bbb_public.mpd",
				    type: "application/dash+xml"
			    });
		    }
	    );
    });
    </script>

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-js-all-debug.js"></script>
		<link rel="stylesheet" href="opy-sdk-js.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: {
							}
						}
					},
					() => {
						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.