Customer Sign In

upLynk

Embedding the upLynk player Part 2: Your own player page

Tutorial thumbnail

Summary Use uplynk.js to embed a DRM-free video in web pages hosted on your own web server.

Skill level required Intermediate HTML knowledge.

Time to complete 15-30 minutes

Things you’ll need
  • A web server running your choice of operating system and web server software.
  • The web server software itself could be Apache, Lighttpd, NGINX, IIS or any number of other web servers available. Many tutorials are available, like this one for setting up a Ubuntu 12.04 LAMP Server.

Step1. Accessing the web server

Let’s start off by testing write access to the web server. Create a text file and name it "player.html". In this text file put the following html:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>upLynk Video Embed</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Save this file and upload it to your web server’s document root directory. Refer to the documentation for your web server software for this directory’s location.

Step 2. Test in the browser

With a web browser, view the player.html page you just created. You should see a header that says “Hello, World!”.

Step 3. Embed the upLynk Player using uplynk.js

Modify player.html to the following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
    <head>
        <title>upLynk Video Embed</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://storage.uplynk.com/js/swfobject.js"></script>
        <script type="text/javascript" src="http://storage.uplynk.com/js/uplynk.js"></script>
        <style type="text/css">

        html {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
        }

        body {
            background-color: #000;
            overflow: hidden;
        }

        #videoPlayer {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        </style>
    </head>
    <body>
        <div id="videoPlayer"></div>
        <script type="text/javascript">
            $(function(){
                $('#videoPlayer').player('play', 'http://content.uplynk.com/468ba4d137a44f7dab3ad028915d6276.m3u8');
            });
        </script>
    </body>
</html>

This code provides a standard web page framework. It includes a popular javascript helper library called jquery. It also includes the uplynk.js code which is implemented as a jquery plugin. We add a <div> container tag which will hold the player itself. The final code between the <script> and </script> tags runs after our page loads and ensures the upLynk player is loaded into the <div> container.

Refresh or reopen player.html in your browser. Playback of “Big Buck Bunny” should begin.

Step 4. Play your own content

By default, upLynk’s Digital Rights Management (DRM) prevents content from being played without a authorization token. Other tutorials walk you through the process of creating and using these tokens.

The example video's DRM has been disabled so that no authorization token is required. This is obviously not secure, but is sometimes useful during the development phase of a project - it lets you focus on getting playback working without worrying about the details of DRM just yet.

You can also mark an asset from your own content library to allow uncontrolled playback, so that during development you can test playback using your own content. Again, you should avoid using this in a production environment since an asset marked in this way could be played by anyone, but during development it can be helpful.

To disable DRM for an asset in your library:

  1. Log in to the upLynk CMS at http://cms.uplynk.com and select an asset.
  2. Click the Advanced tab in the Editor pane.
  3. Under DRM, uncheck "Require a token for playback" and click Save.
  4. Now go to the Details tab and copy the Playback URL.

Next, update player.html with the playback URL of your asset.

  1. Search towards the bottom of the code for the <script …> tag.
  2. Replace the playback url with your asset’s playback URL.
    1
    2
    3
    4
    5
    <script type="text/javascript">
    	$(function(){
    		$('#videoPlayer').player('play', 'http://content.uplynk.com/468ba4d137a44f7dab3ad028915d6276.m3u8');
    	});
    </script>
    
  3. Save player.html and load it in your browser. Your content should begin playing.

Finished!

You’ve embedded the upLynk Player, using uplynk.js, in a web page served from your own web server. In the next tutorial, we'll re-enable DRM on the asset and cover secure playback.

Back to tutorials