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.- Create a link on your blog page that seamlessly switches the current show in the viewer, without leaving your site
- Control other elements of the player, such as opening the Chat panel.
- 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:- Click Menu
- Click Share
- Click the link "Advanced Options"
- 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.
- Select "JavaScript" and then "Copy Code"
<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.
Mar 06
Live Streaming, Kyte Premium Player and More
Posted by: Gannon Hall Under: Product |We’ve been working feverishly the last few weeks to bring some exciting new features to the Kyte Platform, including live streaming and a slew of premium partner features.
Live Streaming
Kyte Player - The embedded Kyte Player now supports live webcam streaming. Anyone can broadcast a live video show by simply clicking the “live mode” toggle from within the webcam producer. The video quality is surprisingly good with minimal delay. I have no idea how our engineers pulled this one off… check it out.
Kyte Mobile Producer - This is a new application we’ve developed for Symbian S60 mobile devices that allows live video streaming and real-time picture uploading directly from the phone’s camera. Currently in private beta with support for Nokia N95 phones, we’re targeting a general beta release for late March. If you’re interested in participating in our beta or would like to be notified when a public release is available, please click here. It would be cruel to hype it up too much since we can’t accommodate that many beta users at the moment, but I have to say that the latest build is amazing. Can’t wait to release it to the wild come late March.
Custom Branding
Users have been asking (no… pleading) for custom player branding like 50 Cent, Raheem Devaughn, or any of the other artists using Kyte. Well ladies and gents, the wait is finally over. Now you can add your own custom graphic to your Kyte Player! You may not get nominated for a Grammy, but at least you can pimp your Player.
Kyte Premium Player & Facebook Applications
Designed to meet the needs of our media and entertainment partners, the Kyte Premium Player delivers several visual and functional enhancements, including custom player branding, elevated viral elements and and custom linking.
The Kyte Premium Player can be delivered as a custom branded Facebook application, allowing artists to connect with fans and deliver a custom branded experience to one of the most popular destinations on the web - in minutes. No really, the entire process of building a custom Premium Player and deploying as a Facebook application literally takes just minutes. Here’s a screencast to prove it.
New API and Wiki
We have a new version of our Developer API available, featuring REST-style API which uses a combination of the HTTP protocol for transport and JSON encoding. Check it out and get started coding your own Kyte powered apps.
(3) Comments • Permalink
Feb 13
Transparent channel logo
Posted by: Marius Küng Under: Tips |Many of you have told us before that you wanted to upload a channel logo with transparency.
We added this capability in our recent release (see channel below).
Btw, it’s about time that we thank you for all your suggestions. Those suggestions are very helpful.
Have another good suggestion? Please send us your ideas here!
(0) Comments • Permalink
Feb 01
Mac Users: Update to new Flash Player
Posted by: Marius Küng Under: Tips |Some of our new features may require an update to your Flash Player.
You can get the update on our website or you can also visit www.adobe.com (click ’Get Adobe Flash Player‘).
Please make sure all browsers are closed before you actually install the Flash Player.
(0) Comments • PermalinkJan 30
New Kyte Features & Improvements
Posted by: Gannon Hall Under: Product |Hey there - The holidays threw us off a bit from our usual four week release cycle, so today we’re particularly pleased to get these new features and improvements into the wild. As with all our releases there is nothing you need to do to upgrade - all your player embeds will automatically update to the new version and your mobile client will prompt you to update. Here are some of the highlights:
Kyte Player
New player sizes - In addition to the standard player, you can now embed “tall” or “wide” players. The new players let you take advantage of available page real-estate by exposing more of the application at once, allowing you to do things like watch a video and chat at the same time.
Embed from player - You can now embed your channel in multiple destinations from the player itself. For instance, you can be watching or producing from MySpace and then embed to your Piczo profile and WordPress blog, all without leaving the Kyte player.
SMS - You can now share a channel with your friends via SMS. Your friends will receive a link to the channel on Kyte Mobile Web.
Other Improvements - We also made a bunch of UI improvements, including a unified Share function and a redesign of the Chat function.
Kyte Mobile
iPhone - We’ve totally pimped out the iPhone experience, making it easier and more enjoyable to use.
Channel Management
Twitter Integration - This a very cool feature for all you Twitters (Twitterers?) out there. You can now configure Kyte to send out a tweet each time you produce a show.
Channel Visibility - Well it isn’t quite private channels but it’s a step in that direction. Now you can designate a channel as hidden and it will not show up in Kyte public areas (like Just Produced on the kyte.tv website, etc.). Of course people can still view your channel if you’ve embedded it somewhere public. Channels created using the Facebook app will by default be marked as hidden so that only your FB friends with access to your profile will see your channel (unless you or someone else embeds it elsewhere). You can easily change this using the channel management tools (kyte.tv --> My Kyte --> My Channels --> Manage Channel --> Edit Channel Details --> Visibility).
That about sums up the big stuff for this release. We’ve also made improvements on the back-end, but that’s all super techie stuff that’s not so fun to write about. Hope you enjoy the new features and improvements, and as always we look forward to your feedback.
P.S. Subscribe to the Kyte blog RSS feed to automatically get updates on new features!
(0) Comments • Permalink