Topics

What's New?


Tags/Keywords

artifacts aspect ratio audacity audio audio service avs converter aws blogs brightcove camcorder cloudberry explorer cloudfront compression embedding firefox flash flash video flv hd hdv high definition joomla jw player podcasting publishpod quicktime s3 s3 amazon s3 browser Skype software streaming video subtitles tubemogul upload video videocast video channel Video Channels/Networks video converter video format vimeo wordpress xlr youtube

Online Marketing - OnToplist.com
Online Marketing

Free Favicon Generator

Page copy protected against web site content infringement by Copyscape



How to switch from low resolution video to HD – part 2

By Rudolf Boogerman | Share this with your favorite social network
0 comments... Click to Contribute.

HD switching with JW playerIn this part, which is meant for S3 Amazon account holders, we are going to focus on streaming video. Streaming has a lot of advantages, which are explained in S3 Streaming video with CloudFront.   One extra perk not discussed in that article is important: when you use HD switching, the HD video picks up where the low resolution version left off and vice versa.
As you perhaps remember from part 1of this tutorial, without streaming, every time you switch between the two modes full screen and page view, the video starts from the beginning again. With streaming the video keeps playing wherever you are in the time line, which makes more sense.

For instance, your visitor is watching the video in the page and decides that he wants to see more detail, so he clicks on the full screen button. Now he gets the HD video which does not go back to the beginning but keeps in playing where it was. After a minute or so, the video stutters because the connection isn’t that good.
Your visitor gets impatient and presses ESC (Escape) to get to the page view again.  There the smaller version plays further without hickups. That is the true power of HD switching combined with streaming!
You can test this out here: http://demo25.footprintaddons.com/demos-s3media-stream-plugin/7-hd-switching-with-streaming-video

However, streaming is not something you can do so easily, unless you use a service like S3 Amazon/CloudFront and upload your videos there.  S3 Amazon has streaming software installed, so you do not have to worry about the technical details of setting up server software.  I’m not going to explain every nut and bold of S3 Amazon (S3 AWS). On the left, there is a category called S3 Amazon/CloudFront, where you find a whole range of articles to get started with the service.  Here we are going to pick up where we left off in part 1.

Preparing the HD switching code for streaming

I presume you read part 1 and have JW mediaplayer installed and that you uploaded your low and high resolution version of the same video to your S3 Amazon account.  If you do not know how to configure your bucket for streaming, have a look here: http://blog.cloudberrylab.com/2009/12/how-to-configure-cloudfront-streaming.html

OK, now that is out if the way, we can look into the code. As with the code in part 1, it looks like horror, but you only need to concern yourself with the red bold parts which you have to customize.  Just copy the code below and put it in a Simple text file(Mac) or Notepad(Win).  Do not use a rich text editor because it adds unwanted formatting:

<scripttype=“text/javascript”src=http://www.yourdomain.com/jwplayer/jwplayer.js”></script>
<div id=”myvideo”>Load the player…</div>

<script type=”text/javascript”>
<!–-
jwplayer(’myvideo’).setup({
‘flashplayer’: ‘http://www.yourdomain.com/jwplayer/player.swf’,
‘wmode’: ‘transparent’,
‘allowscriptaccess’: ‘always’,
‘allownetworking’: ‘all’,
‘file’: ‘myvideo-lowres.mp4‘,
‘width’: 600, ‘height’: 500,
‘allowfullscreen’: ‘true’,
‘controlbar’: ‘bottom’,
‘streamer': ‘rtmp://xxxxxxxx.cloudfront.net/cfx/st’,
‘plugins’:{ ‘hd{ file: ‘myvideo-hd.mp4‘,
‘fullscreen’: ‘true’}
}

});
//–->

</script>

As in part 1, you have to change the red parts in http://www.yourdomain.com/jwplayer/jwplayer.js and ‘flashplayer’: ‘http://www.yourdomain.com/jwplayer/player.swf’, to reflect your situation.  You might have called the folder jwplayer differently and obviously, yourdomain.com is different too. Also the width and height can be different, as in ‘width’: 600, ‘height’: 500,

When you compare this with the code in part 1, you see that a couple of things have changed:

‘file’: ‘myvideo-lowres.mp4‘,
‘streamer': ‘rtmp://xxxxxxxx.cloudfront.net/cfx/st’,
‘plugins’:{ ‘hd{ file: ‘myvideo-hd.mp4‘,

First of all, the ‘file’: ‘myvideo-lowres.mp4, is no longer the full path to the video, it only shows the name of the video. Same with this part:
‘plugins’:{ ‘hd{ file: ‘myvideo-hd.mp4, which is the name of high resolution version of the video itself, nothing more.
And there is an extra line:
‘streamer': ‘rtmp://xxxxxxxx.cloudfront.net/cfx/st’,

‘streamer’ indicates the path to the streamer software on your S3 account and at the same time the streaming distribution where your videos are. The only part you need to adapt is are the xxxxxxxx. This needs to be replaced by the streaming distribution name.  You can find that in the AWS console of S3 Amazon under the CloudFront Distributions tab:

AWS console - streaming distribution name

You only need to copy the string before .cloudfront.net.  Make sure you select the Streaming distribution, not the Download distribution.  You can check that in the left column.  On the right you see the original bucket name.  That way it is easy to locate the correct distribution. You can also use another S3 application like CloudBerry S3 Explorer to look up those values.

In any case, the line of code should now look similar to this:

‘streamer': ‘rtmp://s25ghtbso26.cloudfront.net/cfx/st’, where s25ghtbso26 is a fictitious example in this case.

To resume, your full code should now resemble something like this:

<scripttype=“text/javascript”src=http://www.yourdomain.com/jwplayer/jwplayer.js”></script>
<div id=”myvideo”>Load the player…</div>

<script type=”text/javascript”>
<!–-
jwplayer(’myvideo’).setup({
‘flashplayer’: ‘http://www.yourdomain.com/jwplayer/player.swf’,
‘wmode’: ‘transparent’,
‘allowscriptaccess’: ‘always’,
‘allownetworking’: ‘all’,
‘file’: ‘myvideo-lowres.mp4‘,
‘width’: 600, ‘height’:500,
‘allowfullscreen’: ‘true’,
‘controlbar’: ‘bottom’,
‘streamer': ‘rtmp://s25ghtbso26.cloudfront.net/cfx/st’,
‘plugins’:{ ‘hd{ file: ‘myvideo-hd.mp4‘,
‘fullscreen’: ‘true’}
}

});
//–->

</script>

That’s it! Now that you changed all the code to your custom situation, copy the full code from your text editor and paste it in your page.  If you work with a content management system like WordPress, Joomla, Drupal, etc… make sure you paste the code in the html mode editor, not the visual editor.  You can put this code either before, after or in the middle of text content if you want.

This concludes the second part of this tutorial.  I hope you find it useful.

Topics: Video Channels/Networks | Site search | Write comment
This article has no comments.



No Comments »


Page copy protected against web site content infringement by Copyscape

If you have any questions or suggestions, you can leave a comment on this article below. Comments are subject to an approval process before they are published. By posting a comment, you agree with the terms of use. Backlink spammers won't be published, so don't even try.

Comments

Web Hosting

Web Hosting


Most popular posts

Recent Comments:

  • Oshaf: Hi, I have an USB condenser mic and an USB audio interface, but it seems I can’t get them to work...
  • Mark Kan: Hi , great article! I’m looking to make a website and sell video lessons on cake making. Each lesson...
  • Sam: Thanks for the great tutorial/info. If i have a video hosted with s3 and embed video on my own server’s...
  • Timothy: Thank you. That worked great.
  • Timothy: Hi Rudolf, Thank you for the great tutorial. Is there a way to have each item in the playlist have an HTML5...
  • Dan: Hello, Thanks for video. Is it possible to setup Elastic Transcoder automatically convert media file that is...
  • Alex: Our company has used JW5 for a couple of years now on a VOD website. After firsthand experience with the...
  • Lisa: I stumbled on this review looking for a simple way to describe to a client the difference between Joomla and...
  • Eleanor Shannon: Hi, I have successfully embedded videos from my Vimeo Plus account into my blog but when you press...
  • Elaine: Okay, I found the two functions and it’s coming together. Slowly. Just gotta figure how to insert a...

Most commented posts

Copyright Rudolf boogerman © 2014, all rights reserved.