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

Removing or resizing columns

Hello,

in this post I'll explain how to remove column(s) and how to resize column(s). You can see the result of the manipulation here http://mywebtv.cc/BlackTV.html

You can see the column of icons has been removed and the column of index has been made smaller. So has the column of channel title. The column of channel description is wider. Here is the css code of the columns before the manipulation:

.title_desc {
width:10%;
text-align:center;
}

.title_asce {
width:10%;
text-align:center;
}

.title_channel {
width:40%;
}

.title_description {
width:40%;
}

The css class title_desc is applied to the index column, title_asce is applied to the icons column, title_channel is applied to the channel name column and title_description is applied to the channel description column.

Here is the css code after modification:

.title_desc {
width:5%;
text-align:center;
}

.title_asce {
width:0;
display:none;
text-align:center;
}

.title_channel {
width:20%;
}

.title_description {
width:75%;
}

Notice the width property of the columns has changed. By default, width of the columns are defined in percentage values because I do not know what width you will want your webtv to have. However if you are set on what width you will give your webtv you can use pixels instead to specify the width. Just make sure you use all percentage or all pixels and if you use pixels, make sure the width sums up to the width of your webtv.

Also notice that display property is set to none on the icons column. This effectively removes it from your webtv.

If you are making changes to your webtv css and you want the changes to be applied immediately, you will need to cache manually the webtv after saving the changes (using the cache button on the FeaturedChannels section of your control panel).

So there you go.

Enjoy the webtvs,
Elvis

Embedding your webtv

Hello,

I'd like to take a little time to explain how to embed the webtv. Assuming you have already registered and activated your account, the next step will be to get your webtv code in the "MyTools" section of your control panel located here: http://mywebtv.cc/admin?section=MyTools

There you will see a big box with your webtv embed code in it. Under the box you can customize the code for your webtv by changing its size. You can set the width of your webtv in pixels or in percentage. You can only set the height in pixels. You can also change the startup channel. This setting will override the "Default channel" setting in FeaturedChannels section. So as long as the channel you've set there is not deleted from your webtv, you webtv will start this channel on load. Normally, you will want to leave this to "no override".

Once you've customized your embed code you must copy it onto your website/blog/webpage. The embed code is html code. This means when you paste it on your webpage, you must make sure you can use html. This will only be a problem if you are using a content management system. If you are publishing the webtv directly on your website, then this won't be problem.

If you are pasting your webtv code on your website, you must make sure the page isn't displayed in quirks mode in internet explorer, because the webtv doesn't display very well in quirks mode. Amongst other things, pay attention to your doctype declaration to ensure the page doesn't enter quirks mode.

The webtv should be embedded in the top window. The reason for this is that tracking of the webtvs uses the document.referer property and this won't work if the webtv is embedded inside a child frame. Tracking can be deactivated for the premium webtvs. So if you keep getting "You must embed the webtv in the top window." error and you have a premium webtv, disable tracking from the control panel.

Getting back to the topic at hand. Once you have copied the webtv code, you must paste it into your webpage. You can paste it anywhere inside the body of your page. Here is the html code for this page: http://mywebtv.cc/BlackTV.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BlackTV Demo</title>
</head>

<body>
<center>

<!-- Start of BlackTV code -->
<div id="webtvdiv" style="text-align: center; line-height: 0;"><div><iframe src="http://mywebtv.cc/BlackTV/bar" frameborder="0" allowtransparency="true" scrolling="no" id="bar" name="bar" width="80%" height="28px" style="margin:0;padding:0;">Your browser doesn't support iframe</iframe></div><div><iframe src="http://mywebtv.cc/BlackTV/webtv" frameborder="0" allowtransparency="true" style="margin:1px 0 0 0; padding:0;" scrolling="auto" id="webtv" name="webtv" width="80%" height="371px">Your browser doesn't support iframe</iframe></div></div>
<!-- End of BlackTV code -->

</center>
</body>
</html>

If you want to test your webtv without publishing it to the internet, just paste the above html into your favorite text editor, replace the BlackTV code with your own code you got in the control panel and save the file with .html extension. Then open it with your web browser and you will see your webtv embedded onto a webpage.

So there you go. Bottom line is:
1- Copy your code from control panel
2- Paste it into your website/bog/webpage

Hoping this can help you out,
MyWebTV Admin