How to embed Ant Media Player in WordPress Website

Where necessary, you may need to have access to a VPS server so you can follow how to implement the steps in this article. You can get a cheaper VPS Server from Contabo with 4vCPU cores, 8GM RAM, and 32TB Bandwidth for less than $5.50 per month. Get this deal here now

UPDATED: 11 months ago | Elijah Were

$5.50 Monthly

4 vCPU Cores | 8GB RAM

$15.50 Monthly

6 vCPU Cores | 16GB RAM

$17.50 Monthly

8 vCPU Cores | 24GB RAM

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

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

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:

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

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;

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;

You will then need to click on stream as seen below in the image:

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:

Once you’ve inserted all your credentials in OBS, you can now save and start broadcasting to Ant Media.

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.

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.

Hire us to handle what you want

Hire us through our Fiverr Profile and leave all the complicated & technical stuff to us. Here are some of the things we can do for you:

Website migration, troubleshooting, and maintenance.
Server & application deployment, scaling, troubleshooting, and maintenance
Deployment of Kubernetes, Docker, Cloudron, Ant Media, Apache, Nginx, OpenVPN, cPanel, WHMCS, WordPress, and more
Everything you need on AWS, IBM Cloud, GCP, Azure, Oracle Cloud, Alibaba Cloud, Linode, Contabo, DigitalOcean, Ionos, Vultr, GoDaddy, HostGator, Namecheap, DreamHost, and more.

We will design, configure, deploy, or troubleshoot anything you want. Starting from $10, we will get your job done in the shortest time possible. Your payment is safe with Fiverr as we will only be paid once your project is completed.