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.
- Video file. I’m going to use a short video about BMW M4 coupe located here /wp-content/uploads/2013/11/bmw_m4_coupe.mp4. Note that the video is in mp4 format and that it has a resolution of 1280×720 pixels.
Create an HD VoD CDN
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.
Explanation of the code
- 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.