New Wide Premium Player - the Kyte player gets better and better

Posted by: Cody Smith    Under: Product | Tips |

The Kyte player has many versatile embed functions that can be used in multiple web environments. Just when you thought the Kyte player couldn't be any cooler, we have done it again! With our recent R5 release we have now included the Wide Premium Player to our selection of Kyte Player options.

This version of our player exposes the chatroom to the right of the show window giving the viewer a full interactive chat experience while simultaneously being able to watch any show that has been or is being produced. This player also features our new taller banner heading giving the owner more design area to customize their player and also allows for customizable hyper links.

Example Use Case:

• This is a perfect solution for custom Myspace page designs, put the Wide Premium Player as the top heading of your Myspace page and give your viewers a branded interactive experience to chat and watch your shows! This is a great way to keep your viewers engaged on your Myspace page, and gaurentee return visits.

There are two variables that must be added to your embed code to enable a Wide Premium Player, one telling your player to be "Wide" and the other "Premium".

• &layoutMode=wide (this is the variable telling the player to be wide)
• &premium=true (this is the variable telling the player to be premium)

Here is an example embed code written in JavaScript, highlighted are your new variables for your Wide Premium Player.

• <script type="text/javascript" src="http://www.kyte.tv/js/kyte.js"></script><script type="text/javascript">window.kyteplayer=new Kyte.Player("channels/45725","
  embedId=16542991&layoutMode=wide&premium=true")</script>

Check out the example below of how it all looks!

Comments • Permalink

How to take advantage of the new JavaScript embed code

Posted by: Donn Goodhew    Under: Tips | With our R3 release back in January, we added a javascript embed option for our player giving a total of three basic options for embedding the Kyte player: plain html, javascript, and the special Wordpress.com embed code. If you are using Kyte on a site that allows javascript (for example, blogspot.com) you can take advantage of the javascript embed code to control the flash player on your page. This additional functionality makes Kyte even more powerful on your blog as you can link to specific shows in your Kyte player without linking away from your site. Here are a few things you can do with javascript which I'll explain in this post and illustrate with my "climbing" channel.

1. Create a link on your blog page that seamlessly switches the current show in the viewer, without leaving your site
2. Control other elements of the player, such as opening the Chat panel.
3. By using query string parameters, you can even create a link which will open your page with the Kyte player tuned to a specific show.

Getting Started

To begin, you'll need to get the javascript embed code for your channel. Assuming you are viewing the channel you wish to embed:

1. Click Menu
2. Click Share
3. Click the link "Advanced Options"
4. This will take you to the Kyte site where you can pick the player size and near the bottom you'll see the three embed types presented as radio buttons.
5. Select "JavaScript" and then "Copy Code"

This should give you an embed code that looks like this:

<script type="text/javascript" src="http://media01.kyte.tv/js/kyte.js"></script><script type="text/javascript">window.kyteplayer=new Kyte.Player("channels/1543","embedId=10085411")</script>

To do this systematically, it's best to post this embed code as-is and simply verify that it's working as expected. Once you've done that, we can proceed to the fun stuff.

Link to a Specific Show

Once you've placed the javascript embed, you can use javascript to create links to change shows within the embedded flash player. To do this we'll use the setUri method. It's pretty straight forward, you just pass the uri of the desired show. What is the uri you ask? Well, in this case it will look like this: "channels/channelID/showID". To find the channel and show id:

In the flash player, click: Menu --> Share --> Link --> Show Link. Copy the url which will look like this:

http://www.kyte.tv/ch/1543-climbing/72836-lyn-sends-thriller

The first number is the channel id. This number is constant for a given channel. The second number is the show id which is unique for each show.

So the javascript link to the show looks like this:

<a href="javascript:void(kyteplayer.setURI('channels/1543/72836'))">Link that goes to a different show </a>

and when you click the link you can see the player change to a different show

Controlling other elements of the player

Of the supported methods, setUri is probably the most useful for blogging purposes, but there are a number of other methods available. These work in the same fashion as setUri, so here I'll just list code:

• <a href="javascript:void(kyteplayer.chatPaneOpen(true))"> Open the Chat Pane </a> Open the Chat Pane
• <a href="javascript:void(kyteplayer.chatPaneOpen(false))"> Close the Chat Pane </a> Close the Chat Pane
• <a href="javascript:void(kyteplayer.creatorPaneOpen(true))"> Click here to produce a show </a>Click here to produce a show
• <a href="javascript:void(kyteplayer.creatorPaneOpen(false))"> Close the show creator pane </a> Close the creator pane

Using query string parameters to link to your site and go to a specific show

The query string parameter makes it simple to link to your site and open the Kyte flash player to a specific show. You can find qs code all over the web, but below is one example that works on blogspot.com. Place this piece within the <head> tags of your site or blog template. Of particular importance is the default channel setting (which I've replaced with "YOUR_CHANNEL_ID" in this example). Since you're using the query parameter to set the target of the kyteplayer, you need to specify the default channel in case no parameter is set by the URL. This number should be your channel ID. If you wish you can set a default show as well, but in my example I've left that null, meaning the Kyte player will default to playing the most recent show.

<script type='text/javascript'>
   var qsParm = new Array();
   function qs() {
        var query = window.location.search.substring(1);
        var parms = query.split('&');
        for (var i=0; i< parms.length;i++){
            var pos = parms.indexOf('=');
            if (pos > 0) {
                var key = parms.substring(0,pos);
                var val = parms.substring(pos+1);
                qsParm[key]=val;
                }
            }
        }
    //default setting which specifies the channel
    qsParm['uri'] = "channels/YOUR_CHANNEL_ID";
    qsParm['showId'] = null;
    qs();
</script>

Now with that code in your <head> section, you need to set up the embedded kyteplayer to use the qs parameter. You'll need to modify the embed code slightly to do that. The embed code goes in the body of your page as before, with a slight twist.

Here's the default code you're given:

<script type="text/javascript" src="http://media01.kyte.tv/js/kyte.js"></script><script type="text/javascript">window.kyteplayer=new Kyte.Player("channels/1543","embedId=10085411")</script>

Now create a variable "target" and give it the value of the query parameter 'uri'. Then use "target" in place of the hardcoded uri:

<script type="text/javascript" src="http://media01.kyte.tv/js/kyte.js"></script><script type="text/javascript">var target = qsParm['uri'];Kyte.path = "http://www.kyte.tv";var kyteplayer=new Kyte.Player(target,"embedId=10085411");</script>

Now you can create an url such as http://kylmbing.blogspot.com/?uri=channels/1543/72836 which will take the user to your blog, with the specified show in the player.

Enjoy!

Comments • Permalink