Embed Streaming Player For Free

Now you can embed our player on your website for free. We have decided to give our player away for our vistors who would like to play their online streaming links on their own websites without any cost. Actually we were planned to do this because of the requests which were came from our vistors. So we have allowed this new facility on our website now. You can get the knowledege, how it can be implemented on your websites after following below documentation.

And also you can generate your embed player code using our Embed Player Generator tool.

How to embed the player on your website

Step 01 : Build embeddable URL


As the first step you will need to build the embeddable player URL by following methods.


HTTPS method (For secured websites with SSL certificate)


If your website is secured with SSL certificate, then you will need to use the https protocol for the embeddable URL. At the same time your streaming URL also will need to be supported for the https URL format. Otherwise your stream won't work.


Ex: https://hlstester.com/embed/?url=https://example.com/manifest.m3u8


HTTP method (For non secured websites)


In this method, if your website is not secured with SSL certificate, then you will be able to use this embeddable URL as follows. There are two methods for preparing the URL for embedding.

HTTP URL
Ex 01: http://hlstester.com/embed/?url=http://example.com/manifest.m3u8
Ex 02: http://hlstester.com/embed/?url=https://example.com/manifest.m3u8

HTTPS URL
Ex: https://hlstester.com/embed/?url=https://example.com/manifest.m3u8


HTTPS method with quality switch option


You can pass your different quality streams as a JSON object via url and play your streams with quality switch option. Then your visitors will be able to select the right quality stream for their connection or resolution type. It will be a huge advantage for your vistors and they will be able to stream easily without any issue. At the same time they will be able to save their data. Visit New HLS Player page for more details.


Ex URL:

https://hlstester.com/embed/?sources=[{"url":"https://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4d.m3u8","type":"application/x-mpegURL","label":"720P"},{"url":"https://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4das.m3u8","type":"application/x-mpegURL","label":"480P"},{"url":"https://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4dasas.m3u8","type":"application/x-mpegURL","label":"360P"}]

Ex JSON object:




HTTP method with quality switch option


In this method, if your website is not secured with SSL certificate, then you will be able to use this embeddable URL as follows. There are two methods for preparing the URL for embedding same as previous HTTP method.

HTTP URL
Ex 01:

http://hlstester.com/embed/?sources=[{"url":"http://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4d.m3u8","type":"application/x-mpegURL","label":"720P"},{"url":"http://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4das.m3u8","type":"application/x-mpegURL","label":"480P"},{"url":"http://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4dasas.m3u8","type":"application/x-mpegURL","label":"360P"}]

Ex 02:

http://hlstester.com/embed/?sources=[{"url":"https://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4d.m3u8","type":"application/x-mpegURL","label":"720P"},{"url":"https://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4das.m3u8","type":"application/x-mpegURL","label":"480P"},{"url":"https://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4dasas.m3u8","type":"application/x-mpegURL","label":"360P"}]

HTTPS URL
Ex:

https://hlstester.com/embed/?sources=[{"url":"https://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4d.m3u8","type":"application/x-mpegURL","label":"720P"},{"url":"https://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4das.m3u8","type":"application/x-mpegURL","label":"480P"},{"url":"https://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4dasas.m3u8","type":"application/x-mpegURL","label":"360P"}]

Step 02 : Set poster for the player (Optional)


You can set a poster for player by passing the poster image URL to the player using below method. Here you need to pass the poster URL using 'poster' GET parameter. Poster image type can be used in following formats such as jpg,png,gif


Note:

Always set poster parameter at first in the list of GET parameters. Otherwise it will cause a problem for playing the stream.


HTTPS method (For secured websites with SSL certificate)


Ex: https://hlstester.com/embed/?poster=["https://www.hlstester.com/assets/img/player-bg.jpg"]&url=https://example.com/manifest.m3u8


HTTP method (For non secured websites)


This is also same as previous step.

HTTP URL
Ex 01: http://hlstester.com/embed/?poster=["http://www.hlstester.com/assets/img/player-bg.jpg"]&url=http://example.com/manifest.m3u8
Ex 02: http://hlstester.com/embed/?poster=["https://www.hlstester.com/assets/img/player-bg.jpg"]&url=https://example.com/manifest.m3u8

HTTPS URL
Ex: https://hlstester.com/embed/?poster=["https://www.hlstester.com/assets/img/player-bg.jpg"]&url=https://example.com/manifest.m3u8

Quality Switch Option

You can use the same poster integrate method with quality switch option URL pattern. Please follow below method to get an idea about the implementation.

Ex:

https://hlstester.com/embed/?poster=["http://www.hlstester.com/assets/img/player-bg.jpg"]&sources=[{"url":"https://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4d.m3u8","type":"application/x-mpegURL","label":"720P"},{"url":"https://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4das.m3u8","type":"application/x-mpegURL","label":"480P"},{"url":"https://hlstester.com/archive-1559357962-1800-be4f519e98f9a4ba67783b9cc13407ca53c8ed4dasas.m3u8","type":"application/x-mpegURL","label":"360P"}]

Step 03: Prepare the code block to embed the streaming URL


We use iframes to embed the prepared embeddable URL. Inside the src attribute you can set your prepared embeddable URL. And also you can set your player's size using width and height attributes of the iframe tag.

Use below code block to embed above URL on your website.