Use embed code to add channel

Hello,

I have added another feature to the webtv. If you wish, you can use a channels embed code to publish it to your webtv. Most streaming sites allow you to embed their player on your website and give you an html embed code to do so. Now all you need to do is to paste this piece of html into the "Add Channel" form in your control panel. If you have trouble with a particular code, please post it here.

Elvis

Add HTML to your webtv

If you wish to add html to your webtv, this is now possible. You can use it in the description field of your channels. If you want to add hyperlinks, this can be inconvenient though because when your visitors will click on the link, it will also launch the channel you added the html description for.

Therefore I have added what I call HTML channels. These channels are particular in the fact no player will be launched when the user clicks on its row in the webtv channel list. If you want to add a html channel, just leave the channel link blank and insert the html you want to add in the description field. Optionally add a channel name. If you don't, the logo, the channel number and the channel name columns will not be displayed. Just the HTML code you have added in the description. This way you could add a chat for instance, a chipin widget or any other piece of html directly in your webtv. You may also want to use this to add text in a seperate row in the webtv, with instructions for your viewers for example. An example of an html channel is displayed in the webtv demo on the homepage.

To create this HTML channel I have simply added this piece of code in the description field of the "Add Channel" form:

<a href="http://blog.mywebtv.cc/2010/05/add-html-to-your-webtv.html" target="_blank" class="customlink">HTML Popup Demo</a>

I have also added this piece of css in my WebTV Style page:

a.customlink:link,
a.customlink:hover,
a.customlink:visited,
a.customlink:active,
a.customlink:focus {
display:block;
text-decoration:none;
text-align:center;
color:white;
}

a.customlink:hover {
background:#cc4400;
}

This css code transforms the simple hyperlink into a large button that changes color when hovered upon. This is optional though.

Another thing you may want to consider when making html channels is the style to give to the html channel rows. You can do this with the htmlrow class added to html channel rows. You can find the demo webtv css file here. I have used this css rule to turn off row highlighting on html channels:

.tv tr.highlightrow.htmlrow {
background:transparent;
}

So there you go. A simple example of how to add html to your webtv by making a html channel. Giving it style with your css file is more challenging but it gives great results.

Thanks for using mywebtv,
Elvis

Veetle + Zonein + Webpages

I have added support for Veetle and Zonein. You can add Veetle channels like this:

http://www.veetle.com/v/xxxxxxxxxxxxx
or
http://www.veetle.com/view/index.html#xxxxxxxxxxxxx

you can add Zonein channels like this:
http://mywetv.cc/zonein/xxxx

You must substitute the xxxx with the channel id.

To add webpages, just use the url of the webpage you want to add. By default the webpages will open in the webtv. If you want the webpage to popup in a new window, add #popup at the end of the url. If you want it to open in the current window, add #top.

You can find info on Veetle and Zonein here:
http://www.veetle.com
http://www.zonein.tv

Enjoy,
Admin

WebTV API

Hello,

for those of you who would like to do a little more with your website and your webtv, I have added an API to the webtv so you can control it with javascript from within your own website. The API offers 3 functions to you:

toggleChannels()
togglePlayer()
playChannel('xxxxx')

As you can imagine toggleChannels() will open the channel list but it will also refresh the channel list. togglePlayer() will open the player, displaying the last channel that was playing. playChannel('xxxxx') will play the channel number xxxxx. You can find the number for each of your channels in your channel list xml file. A link to this file is given in your control panel here.

I have posted a demonstration of how you can use the API here. Here is the code I have used to make links to control the webtv:

<a href="javascript:void(togglePlayer())" target="_self">Player</a>
<br />
<a href="javascript:void(toggleChannels())" target="_self">Channels</a>
<br />
<a href="javascript:void(playChannel('58777'))" target="_self">JustinTV Demo</a>
<br />
<a href="javascript:void(playChannel('58778'))" target="_self">Ustream Demo</a>
<br />
<a href="javascript:void(playChannel('58785'))" target="_self">Youtube Demo</a>

If you wish, you could also use buttons or images instead of links to control the webtv. The API should give you all the freedom you need in designing the webtv so it really has the look you want.

You may find it tedious to go manually updating your channel list on your website. To overcome this obstacle you can use php with simplexml and parse your webtv xml file. You can find a demonstration of this technique here. Here is the php code to create the channel list dynamically:

<!-- Start of the custom channel list -->
<div style="float:left; width:200px; height:300px; overflow:auto;">
<a href="javascript:void(togglePlayer())" target="_self">Player</a>
<br />
<a href="javascript:void(toggleChannels())" target="_self">Channels</a>
<br />
<?php
$webtv = "BlackTV";

// Get your webtv channels from mywebtv server
$channels = simplexml_load_file("http://mywebtv.cc/$webtv.xml");
// If your webserver doesn't support allow_url_fopen (see phpinfo())
// then replace the above line with the following
// Copy you channels file in you webserver directory
//$channels = simplexml_load_string(file_get_contents("$webtv.xml"));

// You can make a button for each channel that is online
foreach ($channels->channel as $channel)
if ($channel->online)
echo "<a href=\"javascript:void(playChannel('$channel->id'))\" target=\"_self\" title=\"$channel->description\">$channel->name</a><br />";
?>
</div>
<!-- End of the custom channel list -->

In order to load your channel list xml file into a simplexml object you will need to do one of two things. Either you fetch it directly on mywebtv server, in which case you are sure it is fresh. This is the better option. If however your php server doesn't allow you to fetch a file on a remote server, which is the case with most free php webservers, then you will need to copy your xml file on your server. I have added a FTP Server option in your control panel (here) if you wish MyWebTV to upload your xml file on your ftp server to keep the file fresh.

It may be of some interest to you to know I have found 2 free php servers supporting remote files access and simplexml with php:
- http://www.freewebhostingarea.com/
- http://www.000webhost.com/

Finally, it's important to note you will need to update your webtv code with the latest embed code available from your control panel in order to use the webtv api.

Enjoy,
Elvis

Keyboard shortcuts

If you go to your webtv tools section you will find a few new options to customize your embed code. One of them is to include keyboard shortcuts. If you choose to include them, then you can open the channel list and refresh channels with "C" and you can open the player with "P". This should be particularly useful if you wish to remove the navigation bar from your webtv.

Elvis