Congrats! You’ve made it to the LAST part of the ‘Create your Video Streaming Website’ series which is creating a list of LIVEs & VODs. If you’ve made it this far, you’re already good to complete your Video Streaming website.
However, by reading this last part, you’ll learn how to put it all together in a way that is accessible and user friendly to your viewers.
Check out all the parts of this series:
In this tutorial, you will learn how to make lists (with thumbnails) on a specific page of your WordPress website using short codes from WpStream. This is useful because you can add every single LIVE Channel that is streaming at the moment.
Moreover, you can also add all the VODs to your page. The best thing about using these short codes is that you can create separate pages for separate lists. Here are a few variations of pages:
- Free-To-View Live Streams
- Pay-Per-View Live Streams
- ACTIVE Free-To-View Live Streams
- ACTIVE Pay-Per-View Live Streams
- Free-To-View Video on Demand
- Pay-Per-View Video on Demand
The blocks/widgets you will be using for WpBakery and Elementor are:
- WpStream Channel List
- WpStream Video on Demand List
Before showing you how to get started, you should know exactly what you are trying to achieve ✨visually✨
Note that this will also depend on the way you set up your page and the theme you use. We are using a base theme just so you can understand that it works with any type of theme, even free ones. We are using Signify Dark from WEN Themes for this tutorial.
You will first need to create a LIVE & VOD list that you wish to use for your lists. You can also create two different pages (one for Live streams, one for VODs), or any other variations as mentioned at the beginning of this article. We simply created one page that combines both for simpler understanding.
Creating Your Channels
Go to WpStream ‘All Channels’ and ‘Add New Free-To-View Channel’. Follow the same protocol as shown in the previous parts of this series where you add a title, description, featured image, tags, and categories.
Then, you can ‘Publish’ your channel. You can add different channels or use the ones that your Regular Users use to go LIVE. Check out this tutorial to find out how they can go LIVE.
I have repeated this step for two more Free-To-View Channels.
You can also ‘Add New Pay-Per-View Channel’ by going to ‘All Channels’ again and repeat the steps to ‘Publish’ the channel.
In this case, you will go to Product Data under the description section and choose ‘Live Video’. Add a price, and a sale price if relevant.
Publish your Pay-Per-View Channel.
We now have our Free-To-View and Pay-Per-View Channels ready and we will be Turning ON a few of them (not all at once, you will find out why later).
Creating Your VODs
For your VODs, you can either take your Live Stream Recordings or upload a video file from your own desktop. We don’t have a Video File at the moment so we are just uploading a short clip for demonstration. If you want to check out how to record a live stream, check out this tutorial.
Let’s upload a video file by going to WpStream ‘Recordings’ and click on ‘Choose a File’. Add your video file and it will be uploaded under ‘Your Recordings’. After a couple of settings, you will be able to create a Free-To-View VOD and a Pay-Per-View VOD from it.
Click on ‘Create new Free-To-View VOD from this recording’. You will once again type in your title, description, featured image, etc.
Add your title, description, tags, etc. Once again, since this is a Pay-Per-View VOD, you will need to add a price. Under the description, make sure the ‘Product Data’ is set to ‘Video On Demand’. Add your price and Publish your channel.
Now that you have your LIVE channels and VODs set up, let’s create our list!
Go back to your front-end and click on the page you will be using to add these LIVE channels and VODs. We are using Elementor, so we will be clicking on ‘Edit with Elementor’.
Look up ‘WpStream – Channel List’ and drag the widget to the page.
We will do this again but this time, with ‘WpStream – Video On Demand List’.
Let’s preview the page as seen as your viewers
Now, let’s make some changed and show you what you can do with these lists.
First off, by default, only your Free-To-View Channels are shown. You can change this to only show Pay-Per-View Channels.
The second point, we earlier mentioned that we only Turned ON a few channels and left other channels OFF. Here is why.
By default, all channels will be shown. However, you can choose to show only ‘Active Channels’ or otherwise known as LIVE channels that were turned ON.
This makes sense if you only want to show live streams that are currently happening, as opposed to having every channel available, even though no one is live streaming.
You can also change the number of channels/VODs (items) per page, as well as the text shown under the name of the Channel/VODs
We went ahead and set up 4 lists of LIVEs & VODs and added headings for each list:
- Free-To-View Channels
- Pay-Per-View Channels
- Free-To-View VODs
- Pay-Per-View VODs
Let’s check out one of the Live Channels, Sam’s.
Your viewers will be able to pick from your list of Live Channels or VODs and see who they need to watch. Pro tip – ALWAYS remember to have a featured image for your Channels and VODs (Free or Pay-Per-View Products). This is so that it all looks seamless and professional!
In this article we showed you how to create a list of LIVEs & VODs on your video streaming website. We believe that this was a good way to end the ‘Create a Video Streaming Website’.
This is because it includes everything from going LIVE, VODs, Monetization, and your users going LIVE on your website. You will need a page that shows your audience everything that you have got going on 🙂
Table of Content