Kyte Blog

Mar 14

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:

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!

Name:

Email:

Location:

URL:

Remember my personal information

Notify me of follow-up comments?