Guides
Login
Start typing to search…

Get a streaming URL

This guide explains how to obtain a playable HLS stream URL (in the .m3u8 format) for your uploaded video on FastPix. This URL can be used to integrate your video into any HLS-compatible video player, whether it’s your preferred player or another third-party option.


Steps to get the HLS stream URL

  1. Access the media details page
    • Log in to your dashboard.fastpix.io account.
    • Navigate to View Media. Locate and click on the video for which you need the HLS stream URL to access the media details page.

  2. Locate the HLS stream URL
    • Ensure the status of the video is Ready, confirming that transcoding is complete and the HLS stream is available.
    • Find the HLS stream URL or Playback URL section, located under Play your video section. The URL should end with the .m3u8 extension.

  3. Copy and use the HLS stream URL
    • Copy the full HLS stream URL, including the .m3u8 extension, for integration into HLS-compatible players.

URL format:

https://stream.fastpix.io/{playbackId}.m3u8

You would need to replace the {playbackId} in the URL with the playback ID already generated for your video. This will let you playback the video content by integrating into any HLS-compatible video player.


Copy playback ID

Playback in HLS player

The specific process for integrating the HLS stream URL will vary depending on the chosen player. However, most HLS-compatible players provide a method to set the playback source.

Here's a general approach allowing you the flexibility to integrate your uploaded video content into any player that supports HLS playback. This lets you to choose the player that best suits your requirements and enhances your video accessibility.


1. Refer player documentation

Check the documentation or support resources offered by the player you're using. These resources should provide guidance on configuring the player to utilize an external HLS stream.


2. Defining the playback source

The process of defining the playback source might involve directly providing the HLS stream URL or utilizing an interface within the player that allows you to set the source URL.


3. Initiating video playback

Follow the specific instructions provided by your chosen player to begin playback of the video.



If you choose FastPix Player

If your preferred player is FastPix Player, the HLS stream configuration is already built-in. However, the advantage of acquiring the HLS stream URL lies in its versatility. It can serve as a backup option for you or for testing purposes if needed.


To playback in FastPix Player, locate the section responsible for video playback setup within your application code and insert the following code, replacing {PLAYBACK_ID} with the copied playbackId from the API response you get when uploading a video .


<script src="https://cdn.jsdelivr.net/npm/@fastpix/fp-player@latest/dist/player.js"></script>  
 
<fastpix-player  
    playback-id="{PLAYBACK_ID}"  
</fastpix-player>

With the CDN link in place, whenever a web page loads, fastpix-player will be loaded automatically and ready to use, enabling seamless video playback.



Stream directly on browser

To directly stream your video on a browser, you can also use the playback stream URL which is sharable. Simply preview your video by putting the Playback ID on the stream URL.

 https://play.fastpix.io/?playbackId=963b0fad-cc52-47d7-a790-f9b6c2656219

Using iframe to embed video

You can preview the FastPix Player for video playback inside an <iframe>using the following code:


<iframe 
  src="https://play.fastpix.io/?playbackId=963b0fad-cc52-47d7-a790-f9b6c2656219" >
</iframe>

Please note, you would need to append your playbackId already generated for your video as a value for ?playbackId={playbackId}in the URL to dynamically load videos.


Use options like: autoplay, muted, looped, hide-controls, enableVideoClick (by default it will be false), aspect-ratio, width, height, allowFullScreen to further customize your video playback experience.


Using all the above options, the <iframe> looks like something like this:

<iframe 
src="https://play.fastpix.io/?playbackId=963b0fad-cc52-47d7-a790-f9b6c2656219&autoplay=true&muted=true&loop=true&hide-controls=false&enableVideoClick=true&aspect-ratio=16/9" 
width="640" height="360" 
allowFullScreen >
</iframe>

Once you embed the iframe into your website or application, you would have a video playback like below:

Updated 3 days ago