How To Create Your Own TV Channel Online with Free Tools

0

In this article we’ll show you how to Create Your Own TV Channel. This includes step-by-step instructions on how to create, set up, and publish your own streaming TV channel online using free tools. 

It no longer takes millions of dollars and piles of FCC paperwork to create your own TV channel. Streaming video has grown from expensive, complex and time consuming to universally-affordable and super simple to use. 

With a couple hours of time, these instructions and a handful of videos, you’ll be able to make an online TV channel that rivals Netflix and Hulu.

Preview Demo Site

Table of Contents

Create Your Own TV Channel Step 1: Choose Your Streaming Video Host

Starting your own online TV channel is as simple as signing up for one of the mainy video streaming services and uploading your content. All the complexity of streaming video is then handled by your video host or app. All you have to do is create content!

When choosing your streaming video provider there are a few things to keep in mind. Most providers will have the tools and features important to their specific niche, while a few attempt to offer tools for anyone. For example, Twitch caters towards video game streamers, and offers a suite of tools that make streaming video games simple. On the other end of the spectrum is JWPlayer, a streaming tool that offers a wide range of abilities that fulfill most any need. 

For the purposes of this article, we will be using a free trial of JWPlayer for our examples. If you choose another service provider, chances are good that you will still be able to follow along with this how-to. Most of these tools work in similar ways.

sign up for JWPlayer for free
JWPlayer offers a 30 day free trial and requires no credit card to sign up 
Sign Up For JWPLayer For Free

Create Your Own TV Channel Step 2: Upload Your Media for Your TV Channel

Every TV channel needs some content! Now’s the time to upload it all for your streaming video host to process and store. 

You’ll want to upload the highest quality media you have, as your host will handle the job of transcribing your video into different sizes and formats to enable efficient internet video streaming. Thankfully, we don’t have to do any of that, just export your video from your editing app in high quality and you will be good to go.

Upload Video to JWPlayer to Create Your Own TV Channel

With JWPlayer, click on the Upload button at the top left of your dashboard. It will load a new page with an area to drag and drop your videos (shown above). Select all your videos you want to upload in a folder on your computer and then drag and drop them into this box

JWPlayer Uploads in Progress

Depending on the length/size of your videos and your internet connection speed, this could take a long time. So just sit back and relax while the videos are uploaded and processed. 

Create Your Own TV Channel Step 3: Build Your Website

In order to make this article accessible to the widest possible audience, we will use a free CSS library called Bootstrap to handle the website layout, along with a free jQuery plugin called Tiny Carousel to enable side scrolling video carousels. 

Bootstrap is a powerful and fully responsive website framework that is free to use, and Tiny Carousel includes just enough functionality to meet our needs, without being too big and slowing our TV channel website down. 

If you choose to use another website builder such as WordPress, or even your video provider’s site to display your content, that’s not a problem. Follow along and use what you learn to apply it to your specific online TV channel. 

Don’t worry, you can download the final HTML, JS, CSS and image files used in this article. All you need is your own content. You’re free to use these files in your own streaming TV channel. Full step-by-step instructions are provided below. With the code and instructions you’ll have your own online TV channel up and running in no time!

Download Website Files

Decide on your TV channel’s layout

We really like how most streaming TV apps display their content, with a large preview at the top, and multiple smaller videos shown in rows below the hero video. So we’re going to set our site up similarly, with a single hero video at the top, followed by rows of video previews in side-scrolling carousels. 

Website Wireframe

If you want a different layout, Bootstrap has some great how-to guides that will help you customize your site further with some copying and pasting of code or classes. It’s easier than it sounds, and even non-developers can do it. We welcome you to give it a try for yourself. You’ll be surprised at what you can do on your own. 

Add Previews To Your Videos

We’re also big fans of Netflix’s video previews. We find them so much more informative than a single still image for a thumbnail. These video previews help us quickly decide if we’re interested in watching a video. Even better, they have been shown to increase video conversion rates, which is a nice benefit!

The easiest way to add video previews to your online TV channel is to sign up for a free trial of LucidVideo. This tool will automatically create preview videos that tell a story.

LucidVideo Free Trial
Upload videos for online TV channel

Once logged in to LucidVideo, click on the Upload button on the top right of the page. This will open an upload box. Drag and drop the same videos you added to JWPlayer onto here, and then click Upload video. As with JWPlayer, it will take some time to upload and process your videos, so sit back and relax. 

Process videos after upload to Create Your Own TV Channel

The great part about LucidVideo is that it will automatically make a preview of your videos without any work on your part. LucidVideo’s advanced artificial intelligence will watch your videos, and figure out the most important parts from it to use in video previews. It then creates previews that you can download or embed on any website. 

We’ll be embedding these previews on our videos on our demo site. The hero video will autoplay, while the video previews in the two carousels will play when the user mouses over the thumbnail, or scrolls to the video on their mobile. With these previews, our visitors will get a taste of the video before loading it in a new page.

Customize Your Online TV Channel Website

Note: If you are new to web development and HTML/CSS, the following may seem intimidating. In reality, the HTML template has lots of comments added to it to help you find the correct areas to edit text and paste in video code. 

<!-- ======= Comments Look Like This ======= -->

A piece of advice: HTML and CSS code can be picky. If you accidentally type over or delete some code, it will probably cause part of your site to break. It’s not a problem! Just look back at the example HTML file, find the part you removed and add it back in again!

Feel free to check your work as often as you want. Simply save your HTML file, open it in a web browser and give it a look. Reload the page after you make and save changes to the HTML file to see the results.

To customize your home page, open the index.html file in any text editor. I prefer a free text editor called BBEdit, but you’re free to choose any text editor that can save as plain text. We don’t want Microsoft Word formatting our HTML page as a .docx. 

Update Page Title

At the top of the index.html file, you’ll see an <html> and a <head> tag. We’ll skip past these and go to the area with the Edit Page Title comment. This is where you’ll type in what you want your page to be named. It should be short and describe the page. In the case of our example, we named it Night Walking Tours – Demo Site. Be sure you only edit the text between the two <title> tags. 

<!-- ======= Edit Page Title ======= -->
<title>Night Walking Tours - LucidVideo Demo Site</title>

Choose Page Background Color

If you don’t like the deep blue background color we chose for the site, you may change it by editing the background-color property of the <body> tag. Simply paste in your own color code here to make the change. 

<!-- ======= Edit Page Background Color ======= -->
<body style="background-color:#021e2a; margin:0; padding:0; -webkit0font-smoothing:antialiased;">

Add Your Logo

Next, you’ll want to replace the Demo logo in the header and footer with your own. Paste in the URL of your hosted logo here, or replace the image tag with the following to use a text-based logo. The URL should be pasted between the two quotes in <img src=”images/logo.svg

<!-- ======= Edit Logo Image & URL ======= -->
<a href="index.html">
    <img src="images/logo.svg" class="mt-2 mb-2 logoImage" /> 
</a> 

To use text instead of an image-based logo, replace the <img> tag line with the following, making sure to only change the text between the two <h2> tags when customizing to your site name:

<h2 class="headText">Site Name</h2>

You’ll also want to scroll to the bottom of the index.html file to the Start Footer comment and replace the logo in the site’s footer. In most cases you can just copy and paste the header logo URL or text into the correct area in the footer. 

You should also update the fine print at this time. 

<!-- =======  Start Footer ======= -->
<div class="container">
	<div class="row">
		<div class="col text-center mt-2 mb-2">
			<!-- ======= Edit Bottom Logo ======= -->
			<img src="images/logo.svg" class="mt-2 mb-2 logoImage" />  
		</div>
	</div>
	<div class="row">
		<div class="col text-center finePrint mt-3 mb-5">
		        <!-- ======= Edit Fine Print ======= -->
			© 2021 Lucid. All Rights Reserved. <br />Preview media property of owners and used for educational purposes only.  
		</div>
	</div>
</div>
<!-- =======  End Footer ======= -->

Add Videos to Online TV Channel Homepage

Now that we’ve customized the template to fit your online TV channel branding, to create your own TV channel we need to start adding videos to the page. 

Do some thinking/data analysis on your videos and decide what one you want to feature as the hero. This video will be displayed large at the top of the page, and will autoplay. Keep in mind that we crop out the top and bottom of the video, otherwise it would just fill most people’s screens completely, leaving no room for other previews. So be sure to choose a video that works with the top and bottom third hidden from view. 

Scroll down the index.html file until you see the Start Hero comment. There are six changes you need to make here to create your own TV channel. 

1. Replace demo preview with your preview

Find your video in the LucidVideo Portal. Select the preview you want to display on the top left, then select Autoplay, Loop and Muted under Embed Player Settings. Finally, click the copy icon next to the embed code listed under Step 2. 

Once you have copied the embed code, jump back to your text editor and find the <lucid-player> tag. You will want to select the entire <lucid-player> opening tag, from the first < to the last >. Once selected, paste the embed code you copied from the LucidVideo Portal over the selected text. 

<div class="col">
    <lucid-player video-id="gVCXW1Y8cFOcqrvupWYL" preview-index="1" autoplay loop muted content-overlay>     
        <div class="container-flex shadowHero">

Finally, select the </lucid-player> closing tag at the end of the text you just pasted. Delete it. The end tag is already in the code, below. You don’t want two closing tags. 

2. Edit video headline

Now that you have embedded your preview video, you need to change the headline to match your video.

<h1 class="headText">
    <!-- ======= Edit Headline Here ======= -->
    Big City Night Tours
</h1>
3. Edit video info

Same goes for the video info placed directly below the title. Here we linked to the original content creator. If you like their video, give it a watch!

<div class="subHeadText noMDMob">
    <!-- ======= Edit Video Info Here ======= -->
    WALKING TOUR | ROME by <a href="https://www.youtube.com/watch?v=Gy6fDx9L-zk" style="color:#00a5e9; text-decoration:none;">PROWALK TOURS</a> 
</div>
4. Edit subhead

Now’s the time to edit the subhead. 

<div class="subHeadText noLGMob mt-4">
    <!-- ======= Edit Subhead Here ======= -->
    <h2>Walking tour of Rome, Italy. Filmed at night.</h2>
</div>
5. Edit Watch Now button

And finally, you’ll want to edit the Watch Now button to link to your video. Paste in the URL where your user will watch your full TV show in the quotes after <a href=

<div>
    <!-- ======= Edit Button URL Here ======= -->
    <a href="rome.html"><button class="watchButton">Watch Now</button></a>
</div>
6. Initialize LucidVideo

Every page that uses a LucidVideo preview needs to initialize the tool in order to show previews on the page. Don’t worry, It’s a simple copy-and-paste process. 

First, get your initialization code in the LucidVideo Portal by selecting any video, and then clicking on the copy icon next to Step 1

Scroll down to the end of your HTML file and look for the LucidVideo Initialize comment. Select the entire script and paste over it with the script you copied from the LucidVideo portal. That was easy, wasn’t it?

Adding Videos to a Carousel

Directly under the hero section is a carousel of videos. We’re calling this one the Large Carousel, as the previews contained within are larger than the previews displayed in the smaller carousel. The following will use the Large Carousel as an example. However, both carousels are customized in the same manner.

Before you add videos, you’ll want to change the name of the carousel

<p class="subHeadText mt-4">
    <!-- ======= Edit Large Carousel Name ======= -->
    New Night Tour Releases 
</p>

You’ll want to include at least 5 video previews in the Large Carousel, and 7+ for the Small Carousel. If you do not include enough videos, one or more videos will be repeated in the carousel, so it’s ok if you only have a few videos to start with, you’ll create more as time goes by. 

Easy Copy & Paste Embedding

The process for including previews in a carousel is even easier than in the hero section. Simply go to the LucidVideo Portal, select the video you want to embed, select the preview you like best, and then turn on Loop and Mute Embed Player Settings, then click the copy icon in Step 2 to copy the embed code to your clipboard. 

Next, go back to the index.html file in your text editor and find the Start Video comment in the carousel. Each video embed will be surrounded by a pair of <li> and </li> tags. In our example we made the full video a link, and added a short description of the video as well. 

Select the entire <lucid-player> tag, from open to close, and paste the new embed code over it

Adding More Videos to Carousel

To add more videos, simply copy from the opening of the <li> tag to the closing </li> tag, paste it on the next line, and replace the embedded video, link URL and copy. 

<!-- ======= Start Video ======= -->
<li>
    <a href="miami.html"><lucid-player video-id="KIMA2kWken658Fd8fZYM" preview-index="1" loop muted></lucid-player></a>		
        <div class="videoText mt-2">Miami Beach, Florida, USA</div>
</li>
<!-- ======= End Video ======= -->

In the example above, the entire video is a clickable link. To change where that click sends the user, you will need to edit the URL after <a href=”. Since we have not made these files yet, you can make upa name now, and then use the same name when creating the associated media pages for each video. 

Repeat the above process for all the videos you want to include on the homepage of your Streaming TV Channel website. 

Be sure to save your work!

Making Media Pages

Every video preview that you place on the home page needs a media page created for it. This is another simple copy-and-paste project. 

Create Your Own TV Channel Episode Page

Customize Media Pages

First, you’ll want to open the media.html file included in the create your own tv channel .zip you downloaded. Use the same text editor as you used for the index.html page. 

Now you need to bring this template up-to-date with the index page you just customized. To do so in a few clicks, simply go to your customized index.html file, select from the beginning of the code all the way down to the End Header Section comment. Copy the code and then paste it over the exact same code in the media.html file

Do the same with the footer, copying everything from the Start Footer to the end of the file and pasting it into the same spot in the media.html file.

Next, change the title under the Edit Page Title comment

Finally, you’ll want to save this file with a new name into the same folder as the index.html file. This is the file name you will use when linking from the index page. 

Adding Media to Media Pages

Scroll down to the Start Main Attraction comment, and paste the video’s embed code between the Start/End Media Embed tags

<!-- ======= Start Main Attraction ======= -->
<div class="container">
	<div class="row">
		<img src="images/spacer.gif" class="spacerMedia" /> 
	</div>
	<div class="row mb-2 mt-5">
		<div class="col">
			<!-- ======= Start Media Embed ======= -->
			<div itemscope itemtype="https://schema.org/VideoObject"><meta itemprop="uploadDate" content="Thu Sep 16 2021 11:59:30 GMT-0500 (Central Daylight Time)"/><meta itemprop="name" content="Night Walking Tour - Miami Beach, Miami Downtown - 4k Hdr 60fps"/><meta itemprop="duration" content="P0Y0M0DT0H36M6S" /><meta itemprop="thumbnailUrl" content="https://content.jwplatform.com/thumbs/7aQGZPTm-960.jpg"/><meta itemprop="contentUrl" content="https://content.jwplatform.com/videos/7aQGZPTm-P4DVwA1J.mp4"/><script src="https://cdn.jwplayer.com/players/7aQGZPTm-TqHDtmvd.js"></script></div>
			<!-- ======= End Media Embed ======= -->
		</div>
	</div>
	<div class="row mb-2">
		<div class="col text-center mediaTitle mt-3">
			<!-- ======= Start Media Title ======= -->
			Miami Beach &amp; Downtown <br />Night Walking Tour
			<!-- ======= End Media Title ======= -->
		</div>
	</div>
	<div class="row mb-5">
		<div class="col text-center mediaDescription">
			<!-- ======= Start Media Description ======= -->
			Video used for educational purposes. If you like the video, please <a href="https://www.youtube.com/watch?v=02cqHjyytf0" class="giveCredit">give it a watch on YouTube</a>. 
			<!-- ======= End Media Description ======= -->
		</div>
	</div>
</div>
<!-- ======= End Main Attraction ======= -->

The template also includes an area for you to add a video description. Edit as you please, or remove if you so choose. 

Embedding with JWPlayer

In our example we’re using JWPlayer to stream our TV shows. To copy the embed code from JWPlayer, you’ll need to go to your JWplayer dashboard, click on the video you want to embed, and then click the Embed button on the top right of the page. 

Embed TV Show

This will slide open a drawer with a Javascript embed code. Click on the copy icon on the top right of the dark text box to copy the embed code to your clipboard. 

JWPlayer Embed Code

This is the code that you will paste between the Start/End Media Embed tags to embed your video on the media page. 

Media Page Carousel

Sharp eyes will have noticed the Small Carousel that was included below the main video on the media pages. This was simply a copy and paste of the Small Carousel on the home page. 

Create Your Own TV Channel Video Preview Carousel

Do the same on your media pages by copying from the Start Small Carousel comment to the End Small Carousel comment and pasting it after the End Main Attraction comment. 

Make Other Media Pages

Every video preview on your TV channel’s home page will need its  own media page. Follow the same steps as above for the other media pages for your TV channel. Be sure you start with a finalized and customized page. 

Then all you need is to duplicate the page, rename it, copy and paste the embed code, title and description, and hit save.  

Website Files

Creating a New Tiny Carousel

There are a few things to keep in mind if you want to create a new Tiny Carousel instance. First, you have to pre-build the carousel in the <head> tag, you need to create a new carousel ID, and then attach the ID to several CSS classes. 

1. Copy an Existing Carousel

Copy an entire carousel, from the Start to End comments. 

2. Pre-build your New Tiny Carousel

In the <head> tag of your HTML page there are a pair of comments with the names Start/End Carousel. Copy the entire <script> tag within, and paste it on a new line below. Next, edit the text within the single quotes. The new text within the single quotes is your carousel’s ID.

<!-- ======= Start Carousel ======= -->
<script type="text/javascript">
	$(document).ready(function()
		{
			$('#lgCarousel').tinycarousel();
		});
</script>
<!-- ======= End Carousel ======= -->
3. Now replace the ID in the copy/pasted carousel code with the new carousel ID you just built above.
<div class="row">
    <div class="col mt-1" id="lgCarousel">
        <a class="buttons prev" href="#">&#60;</a> 
4. Create new CSS classes for new Tiny Carousel

TinyCarousel is customized with a handful of CSS classes. The template includes a large and small carousel pre-made for you. If you have something different in mind, you’ll need to copy the eight CSS classes pertaining to the pre-made #lgCarousel and replace that ID with the one you just created, then customize. 

/*---------------------------------------------------------------------
                              Tiny Carousel
-----------------------------------------------------------------------*/

#lgCarousel {
    height: 1%;
    margin: 30px 0 0;
    overflow: hidden;
    position: relative;
    padding: 0 50px 10px;
}

#lgCarousel .viewport {
    height: 245px;
    overflow: hidden;
    position: relative;
}

#lgCarousel .buttons {
    background: #00a5e9;
    border-radius: 35px;
    display: block;
    position: absolute;
    top: 35%;
    left: 0;
    width: 35px;
    height: 35px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 33px;
    text-decoration: none;
    font-size: 22px;
}

#lgCarousel .next {
    right: 0;
    left: auto;
    top: 35%;
}

#lgCarousel .buttons:hover {
    color: #00a5e9;
    background: #fff;
}

#lgCarousel .disable {
    visibility: hidden;
}

#lgCarousel .overview {
    list-style: none;
    position: absolute;
    padding: 0;
    margin: 0;
    width: 240px;
    left: 0;
    top: 0;
}

#lgCarousel .overview li {
    float: left;
    margin: 0 20px 0 0;
    padding: 1px;
    height: 197px;
    border: none;
    width: 350px;
 }

Create Your Own TV Channel Step 4: Upload & Host Your Online TV Channel Website

Now that you’ve made your online TV channel homepage and media pages, the next step is to upload them to your web host so that the world can see it. 

Most web hosts will allow you to upload your site’s files via FTP, while some will only allow you to upload via their website. How you upload your files makes no difference, but we will be uploading via FTP in these examples. 

Upload via FTP

Open your FTP client app on your computer. In the example below we’re using Forklift, but any FTP client will do. Log in and navigate to the root level of your web directory. 

Upload the full contents of your website folder, including the index.html file, any media html files, and the css, js and images folders. 

Use FTP to upload video for online TV Channel

Create Your Own TV Channel – Check if Site is Live

Now that all the files are in place on your web server, let’s give it a try in a web browser. Go to the domain you have tied to your web space and load it in a web browser. For our example the domain is demo.lucidvideo.ai

View Demo Site

If you have done everything right, your site will load and be ready for visitors. 

If something goes wrong, it is probably an easy fix. 

• Try adding /index.html after your domain name. Sometimes a server needs a manual load of the index page before it will automatically do so. 

• Double check your file placement. Be sure the .html files and css/js/image folders are in the correct directory on your web host. 

• Be sure your domain name is live. It takes up to a day or two to set up a new domain or make DNS changes. Perhaps you just need to wait a bit longer. 

Congratulations! You’ve Made Your Own TV Channel Online