Video Acceleration With CDN
05 Nov 2013

Video Acceleration With CDN

Introduction

In this post I’m going to describe how you can accelerate videos on your website using CDN. I’m going to create high definition (HD) video on demand (VoD) CDN service and use it to stream my video without long buffering in any location in the world and without advertisements. As a player I’m going to use my favourite JW Player in it’s embedded version.

Requirements

Create an HD VoD CDN

    1. Log in or Sign up to CDNsun client section.
    2. On the Services tab choose New Service.
    3. Select the CDN HD VoD tab.
    4. Fill in the domain of your website (blog.cdnsun.com in my case) and choose a domain for your new HD VoD CDN service (video.blog.cdnsun.com in my case) as in the picture below.
      Video on Demand CDN service

Embed the JW Player into your website

Now in the CDNsun client section go to the “Services/How-To” section a choose your new HD VoD CDN service which is in my case video.blog.cdnsun.com. You will see a similar code as you can see below. It is a quite self-explanatory code how to embed JW player into your website but I will try to explain it in more detail.

<head>
<script type="text/javascript" 
        src="https://blog-cdnsun.r.worldssl.net/wp-content/uploads/2013/11/jwplayer/jwplayer.js">
</script>
</head>

<body>
<div id="mediaplayer"></div>

<script type="text/javascript">
    $(document).ready(function(){        
        jwplayer("mediaplayer").setup({
            'flashplayer': "https://blog-cdnsun.r.worldssl.net/wp-content/uploads/2013/11/jwplayer.flash.swf",                    
            'file': "http://video.cdnsun.net/81785507/81785507/wp-content/uploads/2013/11/bmw_m4_coupe.mp4.smil",             
            'width': "720",
            'height': "480", 
            'title': "BMW M4 Coupe",                                 
            'provider': "http",
            'http.startparam': "start",   
            'id': "mediaplayer_1",
            'controlbar': "bottom"                        
        });

    });
</script>
</body>

Explanation of the code

  • In the head we initialize the JavaScript code contained in the file “jwplayer.js” which brings us the possibility to use “jwplayer()” function later.
  • We put an empty div with id “mediaplayer” to the place where we want to have our player.
  • Finally we initialize the Flash JW Player:
    • ‘flashplayer’ option tells the jwplayer() function where to find the Flash JW Player.
    • ‘file’ option tells the jwplayer() function where to find the video file. Note that the URI is “http://video.cdnsun.net/81785507/81785507/wp-content/uploads/2013/11/bmw_m4_coupe.mp4.smil”. It is the location of the original video file in the CDNsun content delivery network. In other words “http://video.cdnsun.net/81785507/81785507” is the unique identifier of the HD VoD CDN service which we have created. The advantage of using a CDN instead of streaming the original file is that your video is cached on CDN servers close to your audience which results in quick loading and no lengthy buffering of the video.
    • Then we set a width and a height of the video which we like and we add a title to the video.
    • Finally the mandatory options ‘provider’ and ‘http.startparam’ tells the jwplayer() function that we are streaming over HTTP and that the video should start at the beginning.

That’s all!

Sincerely, CDNsun.