Ant Media Player is a web-based video player that allows users to play live and on-demand video streams in a web browser. The player is built using HTML5 technology and is compatible with most modern web browsers, including Chrome, Firefox, Safari, and Edge. Ant Media allows you to embed this player in your website, so your audience can just browse your URL and start watching your streams.
In this article, we learn how to integrate the Ant Media player in WordPress so you can publish your live streams to your audience..
Create a Live stream in Ant Media
We’re assuming that you already have Ant Media server installed on your system. If you haven’t yet installed it, please read our guide to help you get started on how to install Ant Media on Ubuntu
RECOMMENDED READING: How to install Ant Media Server on VPS
The first thing you need to do is to create a Live stream that you want to be published using the HTML5 Ant Media player. Basically, Ant Media live streams are created under applications.
An application in the context of Ant Media server is a container instance from where you can launch various kinds of streams in Ant Media.
Each Ant Media application contains configuration settings, access controls, and media files that could be attributed to the created streams within. In other words, the application encapsulates everything you need to start a stream in Ant Media server
Ant Media by default ships with already-created applications: LiveApp and WebRTCAppEE. See the image below:
![Setting up the Ant Media player under applications](https://www.ugacomp.com/wp-content/uploads/2023/04/image-2-1024x576.png)
You can also create your own application and name it anything you want. In fact, you can create as many applications as you want in Ant Media web Panel
Now, when you click or create an application in Ant Media, you will be able to create a stream based on your preference. Let’s say you want to broadcast a Prerecorded video using OBS and Ant Media, here are the steps you will need to complete:
RECOMMENDED READING: How to open Ant Media Ports through the Firewall?
Create New Live Stream
As part of the process of trying to embed Ant Media player on your website, we can proceed first with creating the Live stream we would like to broadcast to the end viewers.
Inside your application and under Live Streams, you can create a new live stream. You can name your stream anything you want. In this example, we will call our live stream ugacomp
. See the image below:
![OBS settings for RTMP broadcast to Ant Media Player](https://www.ugacomp.com/wp-content/uploads/2023/04/New-Ant-Media-Live-Stream-1024x576.png)
The other important thing you need to insert is the stream id
as this will be important for embedding Ant Media Player on your website.
By definition, a stream id is a unique identifier assigned to a specific live stream that is being broadcasted or recorded by Ant Media Server. Each stream ID is used to differentiate between multiple live streams that may be running simultaneously on the server.
You can use any word or a string of characters as your stream id for your live stream. If you don’t manually type in your stream id, Ant Media will automatically generate a long string of characters once you create the stream. In this example, we will call our stream id; test124
. and this should look like this in the image below;
![OBS settings for RTMP broadcast to Ant Media Player](https://www.ugacomp.com/wp-content/uploads/2023/04/Ant-Media-Stream-name-and-ID-1024x576.png)
RECOMMENDED READING: How to install an SSL Certificate on Ant Media Server
Configure OBS settings
Now that we’ve configured the live stream settings in Ant Media server, we need to set up OBS so it can send the RTMP broadcasts to the server;
In this example, we’re assuming that you already have OBS on your computer and you know how to use it. So, we will open OBS and click on settings as seen in the image below;
![OBS settings for RTMP broadcast to Ant Media Player](https://www.ugacomp.com/wp-content/uploads/2023/04/image-3.png)
You will then need to click on stream as seen below in the image:
![OBS settings for RTMP broadcast to Ant Media Player](https://www.ugacomp.com/wp-content/uploads/2023/04/image-4-1024x330.png)
At this point, we need to fill in the following credentials:
Service
: This represents the RTMP streaming service you want to use. But in this case, we will select custom in the dropdown.Server
: This is the RTMP server URL of your Ant Media server. The format of this URL should look like this:
rtmp://your server IP address /LiveApp/
From the above URL, you need to put your Server’s IP address. On the other hand, the /LiveAapp
is actually the name of your Ant Media application which we talked about earlier. So, if your application is named something else, then you can replace /LiveApp
with your defined name of that application.
Assuming your server has an IP address of: 174.229.139.79
, and the application name is/LiveApp
, then the RMP URL you’re going to use in OBS will be as follows:
rtmp://174.229.139.79/LiveApp/
Do you remember the stream id test124
we inserted when creating a new live stream in Ant Media? Well, this is going to serve as the Stream Key
in OBS. And the overall OBS configuration will be as seen in the image below:
![OBS settings for RTMP broadcast to Ant Media Player](https://www.ugacomp.com/wp-content/uploads/2023/04/image-5-1024x440.png)
Once you’ve inserted all your credentials in OBS, you can now save and start broadcasting to Ant Media.
RECOMMENDED READING: Solved: Protect Ant Media Streams from getting embedded
Embed Ant Media player
Before you embed Ant Media player on your website, you need to make sure that you already have a custom domain name
and SSL
certificate integrated configured on your Ant Media. This is very important especially if the target website where you’re going to embed your stream has SSL configured.
If your Ant Media server doesn’t have a custom domain name and SSL installed, and you try to embed your stream to a website that has SSL, the stream will fail to load and the player will return an error.
Extract the embed code
You can extract the code to embed by going to your created live stream in Ant Media and clicking copy embed code. The code usually looks like as follows:
<iframe width="560" height="315" src="http://194.163.186.92:5080/LiveApp/play.html?name=test124" frameborder="0" allowfullscreen></iframe>
The most important part of this code is the src
attribute, defining the Player URL with specific parameters of your stream, which in this case should look like this below:
http://194.163.186.92:5080/LiveApp/play.html?name=test124
Putting the embed code on your website
You can embed iframe codes in your WordPress using various methods. For example, if you’re using the Gutenberg
editor, you can use blocks like custom HTML
or embed
. All you have to do is to search for any of these blocks in the editor and then paste the entire iframe code you intend to embed from Ant Media.
If you’re using the Elementor plugin, you can embed Ant Media player by using the HTML widget and pasting the iframe embed code you extracted from the specific live stream you would like to publish on the website.
Once you publish the page on which the Ant Media player is embedded, and if everything is configured correctly, you will be able to watch your live stream from your website.
RECOMMENDED READING: Solved: Ant Media stream refusing to play after embedding
Can I customize the iframe Player?
Yes, you can customize your Ant Media iframe code as long as the most important part, which is the src
attribute that defines the video URL source isn’t tampered with.
You can customize the Player height
and width
to your liking.
More Ant Media Server articles to explore
- How to Secure HLS & DASH Streams in Ant Media Server?
- Solved: SSL not installing on Ant Media Server
- How to install an SSL Certificate on Ant Media Server
- How can I update Ant Media Server on Ubuntu?
- How to open Ant Media Ports through the Firewall?
- Solved: Protect Ant Media Streams from getting embedded
- What you need to know before deploying Ant Media in AWS Cluster
- Solved: Ant Media stream refusing to play after embedding
- How can I enable Adaptive Bitrate streaming in Ant Media Server?
- How much does Ant Media cost to stream to 1000 viewers on AWS
- How much bandwidth does Ant Media Server need?
- How to Optimize the Performance of Ant Media Server
- Why does my Ant Media stream keep buffering?
- How to secure your Ant Media Livestreams?
- Can I use the ant media community license in a cluster?
- How many Streaming channels can you set up on Ant Media?
- Do I necessarily need a GPU to stream Full HD using Ant Media Server?
- How much computing power do you need for Ant Media Server?
- SOLVED: Your live stream will play automatically as soon as it’s available